Sharing tips on using CSS border effects

How to achieve translucent borders? How to implement multiple borders? This article shares techniques for implementing CSS border effects. Interested friends may refer to

. This article shares techniques for implementing CSS border effects for your reference. The specific content is as follows

1. Semi-transparent border implementation

We have a requirement: in an area with a backgroundpicture,definean area with White p with translucent white border. The first thing that comes to mind when implementing this method is that you can define transparency for the border. 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 have the following meanings :

H: Hue(hue). 0 (or 360) represents red, 120 represents green, 240 represents blue, and other values ​​​​can also be used to specify colors. The value is: 0 - 360

S: Saturation. The value is: 0.0% - 100.0%

L: Lightness. The value is: 0.0% - 100.0%

A: Alpha transparency. The value is between 0 and 1.

Run the above style setting in the browser and find that the result we want does not actually appear. p is just a pure white p without any border effect.

The reason for this problem is that the white p blocks the translucent white border. Because if a p is set to white, then the entire color of the box model of this p will be white. If a translucent white border is set, it will not be displayed when placed in this white p (there is no way to display the border when it is set off by the white color of p).

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

border-box The background is clipped to the border box

padding-box The background is clipped to the padding box

content- box The background is clipped to the content box

By default, the value of background-clip is border-clip, which means that the defined background is applied to the entire model. In our example above, the entire p has been All the edges are white. So if we set the background-clip attribute value to padding-box, we can fill the outer border with no color and display the set translucent border. The code is as follows:

p{   
       background:white;   
       border:20pxsolid hsla(0,0%,100%,.5);   
       background-clip:padding-box;   
}

When the style set in this way is re-run in the browser, the expected white translucent border effect will appear.

2. Multiple borders

Sometimes it is necessary to add multiple borders to an element for special effects. Here are two methods of adding multiple borders.

1.box-shadow

The box-shadow property can set the shadow for the box model. But in fact, it also has the function of setting borders.

box-shadow can pass five parameters. The first two parameters represent the offset of the projection, the third parameter represents the blur degree of the projection, the fourth parameter represents the expansion of the projection, and the last parameter represents The color of the projection. However, we rarely use the fourth parameter. Using the fourth parameter here allows the projection to expand. By setting a more appropriate value, the effect of the border can be simulated.

Similarly, the box-shadow attribute can pass in a list of multiple shadows, which can be separated by ",". Therefore, as long as we define a shadow list and incrementally increase the value of its expansion parameter, we can draw the effect of multiple borders.

2.outline

If we only need to draw two layers of borders, we can also use outline. The outline is a layer outside the border, which is the same as the border principle. By setting the outline style, you can set another layer of borders outside the border.

But it should be noted that the border set by the outline attribute will not change with the change of the border style of the internal element. In other words, if the element border has rounded corners, the outermost border drawn by outline is still rectangular. This is a shortcoming of outline drawing borders.

The above is the entire content of this article. I hope you can master the CSS border implementation skills. Thank you for reading.

The above is the detailed content of Sharing tips on using CSS border effects. For more information, please follow other related articles on the PHP Chinese website!