How to make border transparent in css

How to make the border transparent in css: first create an HTML sample file; then create a div in the body; finally set the "border-top:10px solid rgba(200,200,200,0.25);" style to the div, that is Makes the specified border transparent.

The operating environment of this article: windows7 system, HTML5&&CSS3 version, DELL G3 computer

Transparency is generally considered to be a color attribute, but there is no such numerical value. We have found the best way to make div transparent. Using RGBA

RGBA adds parameters to control alpha transparency based on RGB. There are three parameters: R (red), G (green), and B (blue). The positive integer value range is: 0 – 255 or the percentage value range is: 0.0% – 100.0%. Values outside the range are rounded to the nearest value limit. Not all browsers support using percentage values. A parameter, the value is between 0 and 1, and cannot be negative

RGBA syntax example:

.div {background: rgba(200,200,200,0.5);}

Next, we will demonstrate how to make the border transparent:

Give div Set the following style:

div { width: 100px; height:100px; border-top:10px solid rgba(200,200,200,0.25); border-right:10px solid rgba(200,200,200,0.5); border-bottom: 10px solid rgba(200,200,200,0.75); border-left:10px solid rgba(200,200,200,1);}

The display effect is as shown in the figure, with different transparency on each side. When we need to set the transparency of the border, just fill in the last value between 0-1 as needed.

Learning video sharing:css video tutorial

The above is the detailed content of How to make border transparent in css. For more information, please follow other related articles on the PHP Chinese website!