Tips for sharing with CSS border effects

How is a translucent border implemented? How is a multi-border implemented? This article uses the CSS border effect to realize the skill sharing, the interested small partners may refer to

This article for you to share the CSS border effect implementation tips for everyone to reference, the specific content as follows

One, translucent border implementation

Join us there is a need to define a white p with a translucent white border in the area of a background image. The first thing to think about this implementation is that you can define the transparency for the border, and the code is as follows:

p{   Background:white;   border:20px Solidhsla (0,0%,100%,.5);   }

Here Hsla is a method of defining color, and its parameters are as follows:

H:hue (hue). 0 (or 360) indicates red, 120 is green, 240 is blue, and other values are preferred to specify the color. Value is: 0-360

S:saturation (saturation). Values are: 0%-100%

L:lightness (brightness). Values are: 0%-100%

A:alpha transparency. Value between 0~1

Run the above style settings in the browser and find that we don't have the results we want. P is also just a pure white p without any border effect.

The problem arises because the white p blocks the translucent white border. Because if a p is set to white, then the whole color of the box model of this p is white. If a translucent white border is set, it is not displayed in the white P (the frame is not shown by the white color of P).

To solve this problem, you need to use the new attribute--background-clip in CSS3. BACKGROUND-CLIP specifies the drawing area of the background:

Border-box background clipped to border box

Padding-box background is cropped to the inner margin box

Content-box background is cropped to the content box

By default, the value of Background-clip is Border-clip, that is, the entire and model are applied to the defined background, and in our example above, the entire p has been white to the periphery of the bounding box. So if we set the Background-clip property value to Padding-box, the outer border is not filled with color, we can display the set translucent border, the code is as follows:

p{          Background:white;          Border:20pxsolid Hsla (0,0%,100%,.5);          Background-clip:padding-box;   }

This style is re-run in the browser and the desired white translucent border effect appears.

Two, multi-border

Sometimes for the special effects of elements, you might need to add multiple borders to the elements, and here are two ways to add multiple borders.

1.box-shadow

The Box-shadow property allows you to set the projection for the box model. But in fact it also has the function of setting the border.

Box-shadow can pass five parameters, the first two parameters represent the offset of the projection, the third parameter represents the degree of blur of the projection, the fourth parameter represents the projection's expansion, and the last parameter represents the color of the projection. However, we rarely use the fourth parameter, where the fourth parameter is used, the projection can be expanded, by setting a more appropriate value, you can simulate the effect of the border.

Similarly, the Box-shadow attribute can be passed into a list of multiple shadows, separated by ",". Therefore, as long as we define a list of shadows and increment the value of its expansion parameters, we can draw the effect of multiple borders.

2.outline

If we only need to draw a two-layer border, using outline can also be done. Outline is the outer layer of border, the same as the border principle. By setting the style of the outline, you can set a border outside the border.

However, it is important to note that the borders set by the outline property do not change with the inner element boundary style. That is, if the element border has rounded corners, the outermost border drawn by outline is still rectangular. This is a drawback of outline drawing a border.