How to set border transparency in css

In css, you can use the border attribute with rgba() to set all borders to be transparent; you can also use the border-top, border-right, border-bottom, border-left attributes with rgba() to set a certain border The border is transparent.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to make the border transparent in css:

Use RGBA, the three percentages of red, green and blue are all 200, a is a parameter, which can be set to A number between 0 and 1, but never be a negative value. The syntax is as follows:

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

Next, we add styles to the div. First, set the four borders up, down, left, and right, and set the four border settings at the same time. The same height and width, the code is as follows:

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);
}

Display effect:

We can adjust the transparency of the border by changing the parameters, a The larger the parameter, the darker the color, and the value of a is 0, which means it is transparent.

Recommended learning: css video tutorial

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