Rumah > hujung hadapan web > html tutorial > CSS 3 属性学习 -- 2. RGBA_html/css_WEB-ITnose

CSS 3 属性学习 -- 2. RGBA_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:47:33
asal
1427 orang telah melayarinya

RGBA 是 CSS3 中用来控制颜色的单位,分别是 Red Green Blue 三原色和 Alpha 透明度的缩写。

也就是说该属性可以帮助我们在设置颜色的同时,也设置了其透明度。

其实就是 RGB 属性和 opacity 属性的合并写法。

其中 RGB 三个值的设置可以为百分比或者 0~255 的整数值。

A 的值则是 0~1 ,和 opacity 属性一致。

 

一、应用在背景中:

.reg-bgc{    background: rgb(255, 0, 0);}.apl-bgc{    background: rgba(255, 0, 0, 0.5);}
Salin selepas log masuk

2. 边框

.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);;}
Salin selepas log masuk

3. 字体

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

4. 字体阴影

.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);;}
Salin selepas log masuk

5. box 阴影

.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);}
Salin selepas log masuk

demo

 

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan