CSS3-7.3-CSS3其他常用屬性
CSS3其他常用屬性
1.CSS3漸變效果
2.CSS3多列屬性
一：CSS3漸變效果
CSS3漸變效果
1.線性漸變
2.徑向漸變
漸變的四個屬性
1.linear-gradient：用線性漸變創建圖像
2.radial-gradient：用徑向漸變創建圖像
3.repeating-linear-gradient：用重複的線性漸變創建圖像
4.repeating-radial-gradient：用重複的徑向漸變創建圖像
1、線性漸變
- linear-gradient
- 屬性值
- point：設置漸變的起始位置
- left、right、top、bottom以及角度值
- color-stop：設置漸變的起始顏色，可以寫多個
- 顏色與顏色之間用逗號相隔
- color-stop：設置漸變的終點顏色
- point：設置漸變的起始位置
/* CSS3線性漸變基本語法 */
div{
/* Webkit引擎線性漸變語法 */
background:-webkit-linear-gradient(left,red,blue);
/* Presto引擎線性漸變語法 */
background:-o-linear-gradient(left,red,blue);
/* Gecko引擎線性漸變語法 */
background:-moz-linear-gradient(left,red,blue);
/* Trident引擎線性漸變語法 */
background:-ms-linear-gradient(left,red,blue);
/* W3C標準語法 */
background:linear-gradient(to right,red,blue);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3線性漸變</title>
<style type="text/css">
div{
height: 50px;
}
/* 用線性漸變創建圖像 */
.div1{
background:linear-gradient(to right,red,blue);
}
/* 用重複的線性漸變創建圖像 */
.div2{
background:repeating-linear-gradient(to right,red,blue);
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
效果圖
2、徑向漸變
- radial-gradient
- 屬性值
- position：設置漸變的圓心位置
- left、right、top、bottom、center
- 數值與百分數（可以是負數）
- shape：用於定義漸變的形狀
- circle：圓形漸變
- ellipse：默認，橢圓形漸變
- size：用來確定徑向漸變的結束形狀大小
- closet-side
- closet-corner
- farthest-side
- farthest-corner：默認
- color-stop：設置漸變的終止顏色
- position：設置漸變的圓心位置
/* CSS3徑向漸變基本語法 */
div{
/* Webkit引擎線性漸變語法 */
background:-webkit-radial-gradient(red,green,blue);
/* Presto引擎線性漸變語法 */
background:-o-radial-gradient(red,green,blue);
/* Gecko引擎線性漸變語法 */
background:-moz-radial-gradient(red,green,blue);
/* Trident引擎線性漸變語法 */
background:-ms-radial-gradient(red,green,blue);
/* W3C標準語法 */
background:radial-gradient(red,green,blue);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3徑向漸變</title>
<style type="text/css">
div{
height: 150px;
width: 200px;
}
/* 用徑向漸變創建圖像 */
.div1{
background:radial-gradient(red,green,blue);
}
/* 用重複的徑向漸變創建圖像 */
.div2{
background:repeating-radial-gradient(red,green,blue);
}
</style>
</head>
<body>
<div class="div1"></div> <br>
<div class="div2"></div>
</body>
</html>
效果圖
二：CSS3多列屬性
- 通過使用CSS3的多列屬性可以將文本內容分成多列
CSS3多列屬性
1.columns：列的寬度與列數的簡寫屬性
2.column-count：規定元素被分割的列數
3.column-width：規定每個列的寬度
4.column-rule：列的寬度、樣式和顏色的簡寫屬性
5.column-rule-width：規定兩列間邊框的寬度
6.column-rule-style：規定兩列間邊框的樣式
7.column-rule-color：規定兩列間邊框的顏色
8.column-gap：設定每個列之間的距離
1、columns
- 列的寬度與列數的簡寫屬性
- 無書寫順序
- 可只寫一個
2、column-count
- 規定元素被分割的列數
- 屬性值
- 自定義列數
- 可以是auto，由其他屬性決定列數，如column-width
3、column-width
- 規定每個列的寬度
- 屬性值
- 帶像素單位的數值
- auto
4、column-rule
- 列的寬度、樣式和顏色的簡寫屬性
- 無書寫順序
- 可只寫一個或兩個
5、column-rule-width
- 規定兩列間邊框的寬度
- 屬性值
- thin：細邊框
- medium：中等邊框
- thick：粗等邊框
- 自定義邊框寬度：帶像素單位的數值
6、column-rule-style
- 規定兩列間邊框的樣式
- 屬性值
- none：無樣式
- hidden：隱藏樣式
- dottted：點狀線
- dashed：虛線
- solid：實線
- double：雙線
7、column-rule-color
- 規定兩列間邊框的顏色
8、column-gap
- 設定每個列之間的距離
- 屬性值
- normal
- W3C建議的值是 1 em
- 帶像素單位的數值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>column</title>
<style type="text/css">
.column{
/* 規定元素被分割的列數 */
column-count: 2;
/* 列的寬度、樣式和顏色 */
column-rule: dotted 5px blue;
}
</style>
</head>
<body>
<div class="column">columns：列的寬度與列數的簡寫屬性。column-count：規定元素被分割的列數。
column-width：規定每個列的寬度。。。column-rule：列的寬度、樣式和顏色的簡寫
column-rule-width：規定兩列間邊框的寬度。column-rule-style：規定兩列間邊框的樣式。
column-rule-color：規定兩列間邊框的顏色。column-gap：設定每個列之間的距離。
</body>
</html>
效果圖
