CSS3基礎

時間 2019-11-13

標籤 css3 css 基礎欄目 CSS 简体版

原文原文鏈接

內容：css

1.圓角 border-radius html

2.陰影 text-shadow、box-shadow css3

3.漸變 linear、radialweb

4.rgba rgb+alpha opacity動畫

5.transformspa

6.動畫 transition、animation.net

1.圓角 border-radius 3d

經過設置元素的border-radius值，能夠輕鬆給元素設置圓角邊框，甚至實現繪製圓、半圓、四分之一的圓等各類圓角圖形：code

(1)只設置一個值orm

只設置一個值得狀況經常使用來給button加圓角邊框，或者畫一個圓形按鈕，僅需設置一個數值，便可給元素的四個邊角設置統一的圓角弧度

1 .box {width:300px; height:300px; background:#CCC; margin:10px auto 0; border-radius:10px;}

效果：

(2)四個方向的值分別設置

border-radius屬性實際上是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四個屬性的簡寫模式，所以，border-radius : 30px;，其實等價於border-radius : 30px 30px 30px 30px;

這裏要注意四個數值的書寫順序，不一樣於padding和margin的「上、右、下、左」的順序，border-radius採用的是左上角、右上角、右下角、左下角的順序

1 .box {width:300px; height:300px; background:#CCC; margin:10px auto 0; border-radius:10px 20px 30px 40px;}

效果：

(3)省略部分值

與padding和margin同樣，border-radius一樣能夠省略部分值，省略時一樣是採用對角線相等的原則

1 .box {width:300px; height:300px; background:#CCC; margin:10px auto 0; border-radius:10px 40px;}

效果：

(4)橫向縱向分開寫

border-radius還能夠用/分爲橫向和縱向這樣寫：

.box {width:300px; height:300px; background:#CCC; margin:10px auto 0; border-radius:10px/50px;}

效果：

(5)百分比

除了像上面用px做爲單位外還可使用百分比：

1 .box {width:300px; height:300px; background:#CCC; margin:10px auto 0; border-radius:50%;}

效果：

2.陰影 text-shadow、box-shadow

text-shadow：向文本添加一個或多個陰影
box-shadow：向框添加一個或多個陰影

(1)語法

text-shadow：x-shadow y-shadow distance color
box-shadow：x-shadow y-shadow distance size color inset/outset

注：x-shadow和y-shadow均是必需的，其餘可選，x-shadow y-shadow分別表示水平和垂直方向

(2)實例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style media="screen">
 7         .box {width:300px; height:300px; background:#CCC; margin:10px auto 0; text-shadow:5px 50px 1px red; box-shadow: 5px 50px 5px red}
 8     </style>
 9 </head>
10 <body>
11 <div class="box">這是一些字</div>
12 </body>
13 </html>

效果：

3.漸變 linear、radial

注意：漸變其實本質上是圖片

(1)從上到下的線性漸變

1 .box {
2     width:300px; height:300px; margin:10px auto 0;
3     /*background-image:-webkit-linear-gradient(red, green);*/
4     background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
5     background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
6     background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
7     background: linear-gradient(red, blue); /* 標準的語法 */
8 }

效果：

(2)線性漸變 - 從左到右

1 .box {
2     width:300px; height:300px; margin:10px auto 0;
3     background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
4     background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
5     background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
6     background: linear-gradient(to right, red , blue); /* 標準的語法 */
7 }

效果：

(3)線性漸變 - 對角

1 .box {
2     width:300px; height:300px; margin:10px auto 0;    
3     /* 從左上角開始（到右下角）的線性漸變 */
4     background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
5     background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
6     background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
7     background: linear-gradient(to bottom right, red , blue); /* 標準的語法 */
8 }

效果：

(4)更多漸變

更多漸變看此：http://www.runoob.com/css3/css3-gradients.html

4.rgba opacity

(1)二者區別

RGBA 和 opacity 都能實現透明效果，可是二者有明顯不一樣的區別，區別以下：

rgba：RGAB實現透明效果，只改變元素自己的透明效果，文字沒有變透明，另外rgba實際上就是 rgb(顏色)+alpha(透明度。取值0-1之間)
opacity：元素透明其子元素也都透明，如：div在紅色背景透明度爲0.5因而div裏的文字也變得透明

(2)實例

1 body {background:#F0F}
2 .box {
3     width:300px; height:300px; margin:10px auto 0; color:white;
4     background:rgba(0,0,0,0.1);
5     /*opacity: 0.5;*/
6 }

說明：此時box中的文字沒有變透明，可是若是把opacity的註釋去掉那麼文字就會變透明

5.transform

(1)transform做用

rotate 旋轉
scale 縮放
translate 平移(移動端特別愛用translate)
skew 傾斜

**transform必定要加初始值

(2)實例

1 /* CSS3寫法 */
2 transform: rotate(90deg);
3 
4 /* 兼任寫法以下 */
5 -webkit-transform: rotate(90deg);
6 -moz-transform: rotate(90deg);
7 -o-transform: rotate(90deg);
8 -ms-transform: rotate(90deg);

 1 /* rotate 旋轉 */
 2 .box {
 3     width: 300px;
 4     height: 300px;
 5     background: #CCC;
 6     margin: 100px auto 0;
 7     transition: 1s all ease;    /* transition指定過渡效果 */
 8     transform: rotate(0deg);
 9 }
10 
11 .box:active {
12     transform: rotate(90deg);
13 }

 1 /* scale 縮放 */
 2 .box {
 3     width: 300px;
 4     height: 300px;
 5     background: #CCC;
 6     margin: 100px auto 0;
 7     transition: 1s all ease;
 8     transform: scale(1, 1);
 9 }
10 
11 .box:active{transform:scale(2,2);}    /* 沿x軸y軸均放大兩倍 */
12 .box:active{transform:scale(1,0);}    /* 沿y軸縮小直至不見 */
13 .box:active {                           /* 翻轉 */
14     transform: scale(1, -1);
15 }

 1 /* translate 平移 */
 2 .box {
 3     width: 300px;
 4     height: 300px;
 5     background: #CCC;
 6     margin: 100px auto 0;
 7     transition: 1s all ease;
 8     transform: translate(0, 0);
 9 }
10 
11 .box:active {
12     transform: translate(100px, 200px);    /* 向右平移100px  向下平移200px*/
13 }

 1 /* skew 傾斜 */
 2 .box {
 3     width: 300px;
 4     height: 300px;
 5     background: #CCC;
 6     margin: 100px auto 0;
 7     transition: 1s all ease;
 8     transform: skew(0, 0);
 9 }
10 
11 .box:active {
12     transform: skew(0, 30deg);      /* 傾斜30度 */
13 }

(3)補充

多個transform一塊兒用：

 1 .box {
 2     width: 200px;
 3     height: 200px;
 4     background: #CCC;
 5     margin: 100px auto 0;
 6 }
 7 
 8 /* 下面兩種寫法顯示效果不同 */
 9 /* 多個一塊兒用的時候transform會從後往前走 先執行後面的 再執行前面的 */
10 .box:active {
11     transform: scale(2, 1) rotate(45deg)
12 }
13 
14 .box:active {
15     transform: rotate(45deg) scale(2, 1)
16 }

3D變化：

1 2d              3d
2 rotate          rotateX/rotateY/rotateZ
3 translate       translateX/translateY/translateZ

1 .box {
2     width:200px; height:200px; background:#CCC; margin:100px auto 0;
3     transition: 1s all ease;
4     /* perspective -> 至關於定義景深 而後能夠產生透視 出現3D效果 這個值越小3D效果越明顯 */
5     transform:perspective(1000px) rotateX(0);
6 }
7 .box:active {transform:perspective(1000px) rotateX(60deg);}

6.動畫 transition、animation

二者區別：

transition 簡單、容易、方便經常使用
animation 強大、麻煩複雜的鏈式動畫

(1)transition

兼容性：

1 IE十、Firefox、Chrome、Opera 支持 transition 屬性。
2 Safari 須要前綴 -webkit-。
3 Chrome 25 以及更早版本須要前綴 -webkit-。
4 IE9 以及更早版本不支持 transition 屬性

語法：

 1 transition: 
 2 1.動畫時間
 3 2.改變的樣式
 4 3.動畫形式
 5 
 6 eg: transition: 1s all ease
 7 固然也能夠分別指定動畫要改變的樣式：transition: 2s width ease, 1s height ease
 8 
 9 動畫形式：
10 ease ：慢速開始，中間變快，慢速結束
11 liner：勻速運動
12 ease-in：慢速開始
13 ease-out：慢速結束
14 ease-in-out：慢速開始，慢速結束

實例：

1 .box {
2     width: 200px;
3     height: 200px;
4     background: #CCC;
5     margin: 100px auto 0;
6     transition: 1s all ease;   /* 動畫發生1s */
7 }
8 
9 .box:active {width:400px; height:400px; background:yellow; font-size:30px;}