1.半透明rgba

在rgba出現之前，半透明可以用opacity來創建，可是這樣子導致的結果是不僅元素的背景會變透明，標簽元素包含的文字也會變透明。這樣子會導致可讀性降低，所以都會嵌套一個包裝標簽來創建半透明，這樣子很麻煩，自從可以用rgba來表示顏色之后就方便多了。rgba表示方法為：

.rgba{background:rgba(255,0,0,0.5);}

括號里面有是個數字，第一個表示紅色，第二個表示綠色，第三個表示藍色，最后一個表示不透明度。

下面分別用rgba創建半透明和opacity創建半透明（不嵌套包裝元素），然后對比結果：

可以看的出來，opacity創建的半透明，文字也會變得透明。

?

2.多背景圖background-image

以前backround-image只支持一個圖片，現在可以支持多個圖片，只要把它們用逗號隔開就行了，格式為：

background: [background-image] [background-position] [background-repeat], [background-image] [background-position] [background-repeat], [background-image] [background-position] [background-repeat];

?

3.背景裁剪background-clip

這個屬性包括三個值。

第一種：

.test{background-clip:border-box;background-color:#0f0;background-image:url(path/to/image);border:20px dashed #f0c;padding:20px; }

border-box的效果和默認的效果是一樣的，都是從border為邊界，在內部顯示裁剪后的背景。有趣的是，設置border為dashed時，border左上部分的背景顏色為設置的背景顏色。如圖：

第二種：

.test{background-clip:padding-box;background-color:#0f0;background-image:url(path/to/image);border:20px dashed #f0c;padding:20px; }

padding-box以padding為邊界，border將不會有背景顏色。如圖：

第三種：

.test{background-clip:content-box;background-color:#0f0;background-image:url(path/to/image);border:20px dashed #f0c;padding:20px; }

content-box是在內容區域表現的，如圖：

background-clip屬性可以和rgba屬性結合使用，比如這個邊框透明，內容區域不透明的盒子

它完全的代碼為：

#test{background: green;height:222px;width:222px;text-align:center;padding:20px;border:20px solid rgba(244,212,0,0.3);margin:20px;background-clip:padding-box;border-radius:15px;}

在webkit內核的瀏覽器上，我們甚至可以實現利用字體裁剪背景圖片。如我們想要字體的樣子為網格狀，可以這樣子實現：

#test{background:url(test.jpg) no-repeat green;height:222px;width:222px;text-align:center;font-size:55px;font-weight:bold;padding:20px;border:20px dashed #f0c;margin:20px;-webkit-background-clip:text;-webkit-text-fill-color:transparent; }

使用的背景圖片為：

效果為：

可以看出，如果我們使用的字體越粗，效果越明顯，這可以讓我們不使用圖片就做出一些效果，減少因為圖片而導致的http請求。不過這個特性目前只有webkit內核的瀏覽器支持。

?

4.背景大小縮放：background-size

backgound-size有三種賦值。
第一，數字賦值：

#test{background-size:200px 300px; }

第一個值是背景圖片寬度，第二個值是背景圖片高度。這是設置為背景圖寬度為200px，高度為300px。

第二，適應寬度：

#test{background-size:contain; }

縮放背景圖片，使其適應寬度，如圖：

第三，適應高度：

#test{background-size:cover; }

縮放圖片，使其適應高度，如圖：

?

5.漸變：gradient

gradient接受顏色和角度，具體可見代碼：

#test{height:222px;width:222px;text-align:center;padding:20px;border:20px dashed #f0c;margin:20px;background:-webkit-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);background:-moz-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);background-clip:padding-box; }

第一個值為角度，后面的參數為顏色和百分比對應，用空格隔開。該代碼的效果為：

gradient默認從上到下漸變，奇怪的是，添加90deg的角度的話，漸變方向不是轉90度，而是180度。而角度為180deg時，漸變方向卻會轉90度。

IE目前不支持gradient。

?

6.陰影：box-shadow和text-shadow

text-shadow和box-shadow都有3個參數。

第一個為水平偏移量，第二個為垂直偏移量，第三個為模糊的像素寬度，第四個為顏色（可用rgba顏色）。

如：text-shadow:5px 3px 4px rgba(0,0,0,0.7);

意思是說，陰影部分向右偏移5px，向下偏移3px，模糊寬度為4px，顏色為黑色，并且不透明度為0.7 。

#test{height:222px;width:222px;text-align:center;padding:20px;border:20px dashed #f0c;margin:20px;background:-webkit-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);background:-moz-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);background-clip:padding-box;box-shadow:5px 5px 4px rgba(0,0,0,0.7); }

效果為：

#test{height:222px;width:222px;text-align:center;padding:20px;border:20px dashed #f0c;margin:20px;background:-webkit-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);background:-moz-linear-gradient(180deg,#000 0%,#f00 50%,#ff0 100%);background-clip:padding-box;text-shadow:5px 5px 4px rgba(21,132,22,1); }

效果為

?

7.變換：transform

值得注意的有三個：skew，rotate和scale。

首先是skew，定義沿著X軸和Y軸的2D傾斜轉換。如代碼：

#test{-webkit-transform:skew(20deg,10deg);-moz-transform:skew(20deg,10deg);transform:skew(20deg,10deg); }

效果：

接下來是rotate，rotate接受一個旋轉的角度，如代碼：

#test{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg); }

效果為：

最后是scale，定義 2D 縮放轉換。接受兩個值的時候是分別縮放寬度和高度，接受一個值的時候，高度和寬度都根據該值縮放。

如代碼：

#test{-webkit-transform:scale(1,0.5);-moz-transform:scale(1,0.5);transform:scale(1,0.5); }

效果為：

當然，這三個屬性，我們也可以一起用，如代碼：

#test{-webkit-transform:scale(1,0.5) skew(20deg,10deg) rotate(30deg);-moz-transform:scale(1,0.5) skew(20deg,10deg) rotate(30deg);transform:scale(1,0.5) skew(20deg,10deg) rotate(30deg); }

效果為：

?

8.過渡：transition

transition可以實現非常平滑的過渡，最重要的用法就是偽類用法，以前的hover偽類只能實現“瞬間”的變化，有的transition之后，可以實現平滑的過渡了。有設置四個過渡屬性：

transition-property：這個屬性是設置需要過渡的屬性，如color，width等，默認為all，即所有屬性都過渡。

transition-duration：過渡所需的時間。

transition-timing-function：過渡方式。ease：勻速，ease-in：加速，ease-out：減速，ease-in-out：先加速再減速。

transition-delay：過渡發生的延遲。

就上例來說，我們可以這樣寫代碼，使其鼠標懸停的時候過渡的變換：

#test:hover{-webkit-transform:scale(1,0.5) skew(20deg,10deg) rotate(30deg);-moz-transform:scale(1,0.5) skew(20deg,10deg) rotate(30deg);transform:scale(1,0.5) skew(20deg,10deg) rotate(30deg);} #test{transition-property:all;transition-duration:1s;transition-timing-function:ease;transition-delay:0.1s; }

我們還以把過渡簡寫為：

#test{transition:all 1s ease 0.1s; }

?

9動畫:animation

動畫的主要屬性為:

animation-name:名字，關于后續的關鍵幀的定義。

animation-duration：動畫時間。

animation-iteration-count：動畫次數，可為數字和infinite（無限次）。

animation-timing-function:動畫方式，和transition一樣。

這個是一個顏色變換的動畫，如代碼：

#test{height:222px;width:222px;-webkit-animation-name:changeColor;-webkit-animation-duration:6s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:ease;-moz-animation-name:changeColor;-moz-animation-duration:6s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:ease; } @-webkit-keyframes changeColor{0%{background:#f00;}25%{background:#0f0;}50%{background:#00f;}75%{background:#f0f;}100%{background:#f00;} }

?

轉載于:https://www.cnblogs.com/SKLthegoodman/p/3644318.html

總結

以上是生活随笔為你收集整理的css3新特性总结（视觉表现方面）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。