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

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

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

3. Font

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

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

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

demo