Magical CSS Tips-about border effects

One, translucent border implementation

Join us there is a need to define a white div 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:

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

here Hsla as a method of defining colors, the parameters of each of them are as follows:

H : Hue ( hue ) . 0 ( or the red) indicates that the color is green , and that Other values are also desirable to specify the color. Values are:0-360

S : saturation ( saturation ) . Values are:0.0%-100.0%

L : lightness ( brightness ) . Values are:0.0%-100.0%

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. The DIV is also just a pure white div without any border effect.

The problem arises because the white div blocks the translucent white border. Because if a div is set to white, the entire color of the Div's box model is white. If a translucent white border is set, it is not visible in the white div (the white background of the DIV does not show the border).

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 DIV remains white to the perimeter of the border. 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:

div{       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.

Magical CSS Tips-about border effects