CSS3常用屬性及效果匯總

 

 

 

本文轉載於《https://blog.csdn.net/lyznice/article/details/54575905》

一、2D效果屬性

要使用這些屬性，我們需要通過 transform ，並且，為了保證兼容性，我們可能還需要添加帶有瀏覽器內核前綴的屬性，比如 -webkit-transform。

1、位移屬性 translate( x , y )

1、border-radius的值可以為絕對單位px，和相對單位em，rem，也可以為百分比，值越大，弧度越大。 
2、屬性值位數不同時，表現也不同，具體可以參考圖片。 
3、你也可以設置單個角的弧度，比如border-top-right-radius:5px；border-bottom-left-radius:5px。

 

1.2 box-shadow 陰影

 

 

1、box-shadow: X軸偏移值 Y軸偏移值 X軸陰影模糊半徑 Y軸陰影模糊半徑 陰影顏色; 
2、其中，X軸和Y軸的偏移值可以為負，但不能共用一個，X軸和Y軸的陰影半徑可以共用一個，但是不能為負。 
3、還需要注意的是，陰影模糊半徑是可以不寫的，比如box-shadow：10px 10px #ccc；這樣，仍然會有陰影，但是就失去了這種模糊朦朧的效果，立體感也大大減弱了，一般不會這么使用。

 

1.3 box-sizing 屬性允許你以特定的方式定義匹配某個區域的特定元素，這話有點繞口，我們結合圖來說明。

box-sizing:content-box/border-box/inherit

盒模型基本結構如圖，當我們設置了寬高，使用了box-sizing屬性， 
屬性值為content-box時，寬高的值為content的寬高； 
屬性值為border-box時（事實上我們比較常用的就是這個），寬高的值為border+padding+content也就是整個盒模型的寬高； 
屬性值為inherit時，則從父元素繼承box-sizing的值。

 

二、背景

CSS3中，我們對背景有了更強的控制

2.1 background-image

跟以前不同的是，我們通過background-image來為一個元素添加多張圖片，讓我們結合代碼和效果圖來看一下。

<div class="box"></div>/*右下角的小圖為bg_flower.gif*/

 

.box{
    height: 500px;
    width: 800px;
    margin: 0 auto;
    margin-top: 100px;
    background-image: url(img/bg_flower.gif), url(img/2.jpg);/*寫在前面的背景圖會在上面*/
    background-position: right bottom, left top;/*默認為left top*/
    background-repeat: no-repeat, repeat;/*默認為repeat*/
}

 

2.2 background-size 調整背景圖片的大小

屬性值可以為實際單位，也可以是百分比。

　　

.box{
    background-size:60px 100px;/*寬，高*/
    background-size:60% 100%;
}

 

2.3 background-origin 規定背景圖片的定位區域

background-origin: content-box / padding-box / border-box ; 
下圖中，綠色的是邊框，黃色的是padding+content區域。

　

 

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

　　

div{
    float:left;
    margin:30px;
    width: 120px;
    height: 150px;
    background: yellow;
    border: 20px solid green;
    padding: 20px;
    background-image: url(img/bg_flower.gif);
    background-repeat: no-repeat;
}
.box1{
    background-origin:content-box;
}
.box2{

    background-origin:padding-box;
}
.box3{
    background-origin:border-box;
}

 

 

2.4 background-clip 規定背景的繪制區域

background-clip: content-box / padding-box / border-box ;

　　

<div class="box1">啦啦啦啦，德瑪西亞。啦啦啦啦，劍聖偷塔。啦啦啦啦，我要回家。啦啦啦啦，下雨不怕。啊啊！</div>
<div class="box2">啦啦啦啦，德瑪西亞。啦啦啦啦，劍聖偷塔。啦啦啦啦，我要回家。啦啦啦啦，下雨不怕。啊啊！</div>
<div class="box3">啦啦啦啦，德瑪西亞。啦啦啦啦，劍聖偷塔。啦啦啦啦，我要回家。啦啦啦啦，下雨不怕。啊啊！</div>

div{
    float:left;
    margin:30px;
    width: 120px;
    height: 150px;
    background: yellow;
    border: 20px solid rgba(0, 0, 0, 0.1);
    padding: 20px;
}
.box1{
    background-clip:content-box;
}
.box2{

    background-clip:padding-box;
}
.box3{
    background-clip:border-box;
}

 

2.5 linear-gradient 背景的顏色漸變（IE10）

CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。以前，你必須使用圖像來實現這些效果。但是，通過使用 CSS3 漸變（gradients），你可以減少下載的事件和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。 
其中顏色可以用多種表現形式，包括帶有透明度的rgba()形式

　　

1） 線性漸變

 

下面讓我們來看代碼

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>

div{
    float:left;
    margin:30px;
    width: 100px;
    height: 150px;
    border: 2px solid orange;
    font-size: 14px;
    line-height: 1.5;
}
.box1{/* 1、屬性值最少為兩種顏色 */
        background: -webkit-linear-gradient(red, yellow); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, yellow); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, yellow); /* Firefox 3.6 - 15 */
        background: linear-gradient(red, yellow); /* 標准的語法 */
}
.box2{/* 2、可以設置顏色漸變的方向，比如從左到右 */
        background: -webkit-linear-gradient(left, green , yellow); 
        background: -o-linear-gradient(left, green, yellow); 
        background: -moz-linear-gradient(left, green, yellow); 
        background: linear-gradient(left, green , yellow);
}
.box3{/* 3、也可以沿着對角的方向漸變 */
        background: -webkit-linear-gradient(top left, blue , yellow); 
        background: -o-linear-gradient(top left, blue, yellow); 
        background: -moz-linear-gradient(top left, blue, yellow); 
        background: linear-gradient(top left, blue , yellow); 
}
.box4{/* 4、或者，我們直接用角度確定漸變的方向（12點鍾方向為0deg） */
       background: -webkit-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); 
       background: -o-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); 
       background: -moz-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); 
       background: linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233)); 
}
.box5{/* 5、我們也可以定義多種顏色的漸變，之前的方向的設置方法不變 */
      background: -webkit-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);
      background: -o-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);
      background: -moz-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);
      background: linear-gradient(45deg, red,orange,yellow,green,blue,indigo,violet); 
}
.box6{/* 6、當然，漸變可以是很多次的 */
      background: -webkit-repeating-linear-gradient(red, red 10%, yellow 20%); 
      background: -o-repeating-linear-gradient(red, red 10%, yellow 20%);
      background: -moz-repeating-linear-gradient(red, red 10%, yellow 20%); 
      background: repeating-linear-gradient(red, red 10%, yellow 20%); 
}

　

2）、徑向漸變

創建一個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以指定漸變的中心、形狀（原型或橢圓形）、大小。
默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。

　　

 

下面上代碼

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>

div{
    float:left;
    margin:30px;
    width: 150px;
    height: 150px;
    border: 2px solid orange;
    font-size: 14px;
    line-height: 1.5;
}
.box1{/* 1、顏色結點均勻分布（默認情況下 */
    background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 - 15 */
    background: radial-gradient(red, yellow, green); /* 標准的語法 */
            }
.box2{/* 2、當然，對於顏色發輻射界限，我們也可以進行設置 */
    background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); 
    background: -o-radial-gradient(red 5%, yellow 15%, green 60%); 
    background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); 
    background: radial-gradient(red 5%, yellow 15%, green 60%); 
}
.box3{/* 3、shape 參數定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。            默認值是 ellipse。*/
    background: -webkit-radial-gradient(circle, red, yellow, green); 
    background: -o-radial-gradient(circle, red, yellow, green); 
    background: -moz-radial-gradient(circle, red, yellow, green); 
    background: radial-gradient(circle, red, yellow, green); 
            }
.box4{/* 4、size 參數定義了漸變的大小。它可以是以下四個值：closest-side farthest-side closest-corner                 farthest-corner，具體的不同大家可以自己嘗試，這里只展示一種情況 */
    background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
    background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
    background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
    background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
.box5{/* 5、當然，也是有重復漸變這種情況*/
    background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
    background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
    background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
    background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

 

三、文本

 3.1 text-shadow 文本陰影

規則跟box-shadow類似，text-shadow：X軸偏移值，Y軸偏移值，陰影模糊半徑，顏色。在這里，需要注意的是，如果前三個數值寫兩個，比如text-shadow：5px 5px #ccc；會認為陰影模糊半徑不存在，仍然有文字的重影，但是沒有模糊的視覺效果了。

　　

 

3.2 word-wrap | word-break 是否允許長單詞換行，這兩個可以一起使用

word-wrap: normal(只允許斷點字換行) | break-word(如果單詞過長，截斷強制換行) 
word-break: normal(瀏覽器默認的換行規則，一般是不允許長單詞內部換行) | break-all（允許在單詞內換行) | keep-all(只能在半角空格或連字符處換行);

　　

<div class="box1">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
<div class="box2">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
<div class="box3">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
<div class="box4">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>

　　

div{
    float:left;
    margin:30px;
    width: 100px;
    height: 150px;
    border: 2px solid rgba(0, 0, 0, 0.5);
    font-size: 14px;
    line-height: 1.5;
}
.box1{
    word-wrap: normal;
}
.box2{
    word-wrap: break-word;
}
.box3{
    word-break: keep-all;
}
.box4{
    word-break: break-all;
}