<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>04</title>
<style>
/*1*/
.one{
width: 50px;
height: 50px;
border: 1px solid #0000FF;
background: rgb(255,0,0);/*紅綠藍*/
}
/*2*/
.two{
width: 50px;
height: 50px;
border: 1px solid #0000FF;
background: rgba(255,0,0,0.5);/*紅綠藍 透明度*/
}
/*3*/
.three{
width: 50px;
height: 50px;
border: 1px solid #0000FF;
/*
H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值爲：0 - 360
S：Saturation(飽和度)。取值爲：0.0% - 100.0%
L：Lightness(亮度)。取值爲：0.0% - 100.0%
*/
background: hsl(0,100%,50%);
}
/*4*/
.four{
width: 50px;
height: 50px;
border: 1px solid #0000FF;
/*
A:Alpha透明度。取值0~1之間。
*/
background: hsla(0,100%,50%,0.5);
}
/*5*/
.five{
width: 50px;
height: 50px;
border: 1px solid #0000FF;
background:rgb(255,0,0);
opacity:0.5;
filter:Alpha(opacity=50);/*ie兼容性*/
}
/*6*/
.six{
width: 50px;
height: 50px;
border: 1px solid #0000FF;
background: transparent;/*用來指定全透明色彩。*/
}
/*7*/
.seven{
width: 300px;
height: 50px;
border: 1px solid #FF0000;
/*
-moz-linear-gradient有三個參數。
第一個參數表示線性漸變的方向，top是從上到下、left是從左到右，如果定義成left top，那就是從左上角到右下角。
第二個和第三個參數分別是起點顏色和終點顏色。
你還可以在它們之間插入更多的參數，表示多種顏色的漸變。
* */
background: -moz-linear-gradient(top,#8fa1ff, #3757fa);/*firefox*/
}
/*8*/
.eight{
width: 300px;
height: 50px;
border: 1px solid #FF0000;
/*
-webkit-gradient是webkit引擎對漸變的實現參數，一共有五個。
第一個參數表示漸變類型（type），可以是linear（線性漸變）或者radial（徑向漸變）。
第二個參數和第三個參數，都是一對值，分別表示漸變起點和終點。這對值可以用座標形式表示，也可以用關鍵值表示，比如 left top（左上角）和left bottom（左下角）。
第四個和第五個參數，分別是兩個color-stop函數。color-stop函數接受兩個參數，第一個表示漸變的位置，0爲起點，0.5爲中點，1爲結束點；第二個表示該點的顏色。
* */
background: -webkit-gradient(linear,0 0,0 bottom,color-stop(0,#ff4f02),color-stop(1,#8f2c00));/*Saf4+, Chrome*/
/*
線性漸變使用from()以及to()方法指定過渡顏色點:
background: -webkit-gradient(linear, left top, left bottom, from(#96ff00), color-stop(0.5, orange), to(rgb(255, 0, 0)));
線性漸變多個過渡點在同一位置：
background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
* */
}
/*9*/
.nine{
width: 300px;
height: 50px;
border: 1px solid #FF0000;
/*ie
IE依靠濾鏡實現漸變。startColorstr表示起點的顏色，endColorstr表示終點顏色。GradientType表示漸變類型，0爲缺省值，表示垂直漸變，1表示水平漸變。
* */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/
}
/*10*/
.ten{
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid hsla(60,50%,80%,.8);
background-image: -webkit-radial-gradient(hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
background-image: radial-gradient(hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
}
</style>
</head>
<body>
<!--
作者：offline
時間：2015-09-17
描述：
RGBA - IE8及以下瀏覽器不支持這種寫法
HSL - IE8及以下瀏覽器不支持這種寫法
HSLA - IE8及以下瀏覽器不支持這種寫法
transparent - IE8及以下瀏覽器將文本顏色設置爲transparent，文本將顯示爲黑色
-->
<div class="one"></div>
<br />
<div class="two"></div>
<br />
<div class="three"></div>
<br />
<div class="four"></div>
<br />
<div class="five"></div>
<br />
<div class="six"></div>
<br />
<div class="seven"></div>
<br />
<div class="eight"></div>
<br />
<div class="nine"></div>
<br />
<div class="ten"></div>
<a href="http://www.w3cplus.com/css3/new-css3-radial-gradient.html">徑向漸變</a>
</body>
</html>css3--顏色和透明度
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章