Can you write transparent borders in css? How to make border transparent in css

When many people are making websites, they sometimes encounter the need to write transparent borders, but many novices don’t know whether they can write transparent borders in CSS? Let's talk about how to make the border transparent with css?

1: Can transparent borders be written in css?

It is possible to write transparent borders in css. The key is how to write, how to write? Waiting for some questions, transparency is also considered to be a color attribute, but there is no such value in the color attribute, but we can use div to achieve transparent borders.

2: How to make the border transparent with css

Use RGBA, the three percentages of red, green and blue are all 200, a is a parameter, which can be set from 0 to A number between 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 borders to 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, the parameter of a The larger the value, the darker the color. A value of 0 indicates transparency.

The above is about whether it is possible to write transparent borders in css? A full introduction to how to make the border transparent in CSS. If you want to know more about CSS3 tutorial, please pay attention to the php Chinese website.

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