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

云罗郡主
Release: 2018-11-21 14:06:48
Original
10143 people have browsed it

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);}
Copy after login

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);
}
Copy after login

Display effect:

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

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template