Home > Web Front-end > HTML Tutorial > CSS 3 attribute learning -- 2. RGBA_html/css_WEB-ITnose

CSS 3 attribute learning -- 2. RGBA_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:47:33
Original
1418 people have browsed it

RGBA is the unit used to control color in CSS3, which is the abbreviation of the three primary colors of Red Green Blue and Alpha transparency.

That is to say, this attribute can help us set the color and transparency at the same time.

In fact, it is the combined writing method of RGB attribute and opacity attribute.

The settings for the three RGB values ​​can be percentages or integer values ​​from 0 to 255.

The value of A is 0~1, which is consistent with the opacity attribute.

1. Apply in the background:

.reg-bgc{    background: rgb(255, 0, 0);}.apl-bgc{    background: rgba(255, 0, 0, 0.5);}
Copy after login

2. Border

.reg-border-color{    border-width:3px;    border-style: solid;    border-color: rgb(255, 0, 0);;}.apl-border-color{    border-width:3px;    border-style: solid;    border-color: rgba(255, 0, 0, 0.5);;}
Copy after login

3. Font

.reg-font-color{    color:rgb(255, 0, 0);;}.apl-font-color{    color:rgba(255, 0, 0, 0.5);;}
Copy after login

4. Font shadow

.reg-textshad-color{    text-shadow: 0 2px 1px rgb(255,0,0);;}.apl-textshad-color{    text-shadow: 0 2px 1px rgba(255,0,0,0.5);;}
Copy after login

5. box shadow

.reg-boxshad-color{    box-shadow: 0 5px 5px rgb(255,0,0);    -webkit-box-shadow: 0 5px 5px rgb(255,0,0);    -moz-box-shadow: 0 5px 5px rgb(255,0,0);}.apl-boxshad-color{    box-shadow: 0 5px 5px rgba(255,0,0,.5);    -webkit-box-shadow: 0 5px 5px rgba(255,0,0,.5);    -moz-box-shadow: 0 5px 5px rgba(255,0,0,.5);}
Copy after login

demo

Related labels:
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