html常用屬性border-radius、linear-gradient怎么使用
一、總結
一句話總結：
1、border-radius: 8px 8px 8px 8px !important;
2、linear-gradient(rgba(255,124,67,0),rgba(255,0,0,1))
二、CSS3的border-radius屬性詳解
border-radius: 8px 8px 8px 8px !important;
border-radius: none ｜ length{1,4} [/ length{1,4}
其中每一個值可以為 數值或百分比的形式。
length/length 第一個lenght表示水平方向的半徑，而第二個表示豎直方向的半徑。
如果是一個值，那么 top-left、top-right、bottom-right、bottom-left 四個值相等。
如果是兩個值，那么 top-left和bottom-right相等，為第一個值，top-right和bottom-left值相等，為第二個值。
如果是三個值，那么第一個值是設置top-left，而第二個值是 top-right 和 bottom-left 並且他們會相等,第三個值是設置 bottom-right。
如果是四個值，那么第一個值是設置 top-left， 而第二個值是 top-right 第三個值 bottom-right 第四個值是設置 bottom-left
除了上述的簡寫外，還可以和border一樣，分別寫四個角，如下：
border-top-left-radius: //左上角
border-top-right-radius: //右上角
border-bottom-right-radius: //右下角
border-bottom-left-radius: //左下角
分別是水平方向和豎直方向半徑，第二值省略的情況下，水平方向和豎直方向的半徑相等。
border-radius 只有在以下版本的瀏覽器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 標准語法格式，對於老版的瀏覽器，border-radius 需要根據不同的瀏覽器內核添加不同的前綴，比說 Mozilla 內核需要加上“-moz”，而 Webkit 內核需要加上“-webkit”等，但是IE和Opera沒有私有格式，因此為了最大程度的兼容瀏覽器，我們需要設置如下：
-webkit-border-radius: 10px 20px 30px;
-moz-border-radius: 10px 20px 30px;
border-radius: 10px 20px 30px;
請將標准形式寫在瀏覽器私有形式之后。
舉幾個例子看一下效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="關鍵詞一，關鍵詞二">
<meta name="Description" content="網站描述內容">
<meta name="Author" content="劉艷">
<title></title>
<style> img{border-radius: 30px;margin: 100px;} </style>
</head>
<body>
<img src="../images/photo.jpg" width="300px">
</body>
</html>效果：
四個角的半徑都是30px;
再看一個標准的圓以及橢圓：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="關鍵詞一，關鍵詞二">
<meta name="Description" content="網站描述內容">
<meta name="Author" content="劉艷">
<title></title>
<style> div{display: inline-block; border: 10px solid red;} .circle{width: 50px; height: 50px; -webkit-border-radius:50%;-moz-border-radius:50%;border-radius: 50%;} .elipse{width: 50px; height: 100px; -webkit-border-radius:50%;-moz-border-radius:50%;border-radius: 50%;} </style>
</head>
<body>
<div class="circle"></div>
<div class="elipse"></div>
</body>
</html>效果：
第一個和第二個div的差別主要在於其是正方形還是長方形，圓圈在輪播時，可以替代圓圈的圖片使用。
以上都是水平方向和豎直方向半徑相等的例子，下面舉兩個水平方向和豎直方向半徑不相同的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="關鍵詞一，關鍵詞二">
<meta name="Description" content="網站描述內容">
<meta name="Author" content="劉艷">
<title></title>
<style> div{display: inline-block; border: 10px solid red;margin: 100px;} .div1{width: 200px; height: 100px;border-radius: 0px 50px 32px/28px 50px 70px;} .div2{width:100px; height: 200px; border-radius: 26px 106px 162px 32px/28px 80px 178px 26px;} .div3{width:100px;height: 200px; border-radius: 20px 50px/ 20px 50px;} </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>效果如下所示：
三、漸變
語法
線性漸變 - 從上到下（默認情況下）
實例
從上到下的線性漸變：
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 標准的語法 */
}
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 標准的語法 */
}
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 標准的語法 */
}
linear-gradient(rgba(255,124,67,0),rgba(255,0,0,1))