1.半透明rgba

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

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

括號里面有是個(gè)數(shù)字，第一個(gè)表示紅色，第二個(gè)表示綠色，第三個(gè)表示藍(lán)色，最后一個(gè)表示不透明度。

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

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

?

2.多背景圖background-image

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

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

?

3.背景裁剪background-clip

這個(gè)屬性包括三個(gè)值。

第一種：

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

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

第二種：

.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是在內(nèi)容區(qū)域表現(xiàn)的，如圖：

background-clip屬性可以和rgba屬性結(jié)合使用，比如這個(gè)邊框透明，內(nèi)容區(qū)域不透明的盒子

它完全的代碼為：

#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內(nèi)核的瀏覽器上，我們甚至可以實(shí)現(xiàn)利用字體裁剪背景圖片。如我們想要字體的樣子為網(wǎng)格狀，可以這樣子實(shí)現(xiàn)：

#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; }

使用的背景圖片為：

效果為：

可以看出，如果我們使用的字體越粗，效果越明顯，這可以讓我們不使用圖片就做出一些效果，減少因?yàn)閳D片而導(dǎo)致的http請求。不過這個(gè)特性目前只有webkit內(nèi)核的瀏覽器支持。

?

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

backgound-size有三種賦值。
第一，數(shù)字賦值：

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

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

第二，適應(yīng)寬度：

#test{background-size:contain; }

縮放背景圖片，使其適應(yīng)寬度，如圖：

第三，適應(yīng)高度：

#test{background-size:cover; }

縮放圖片，使其適應(yīng)高度，如圖：

?

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; }

第一個(gè)值為角度，后面的參數(shù)為顏色和百分比對應(yīng)，用空格隔開。該代碼的效果為：

gradient默認(rèn)從上到下漸變，奇怪的是，添加90deg的角度的話，漸變方向不是轉(zhuǎn)90度，而是180度。而角度為180deg時(shí)，漸變方向卻會轉(zhuǎn)90度。

IE目前不支持gradient。

?

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

text-shadow和box-shadow都有3個(gè)參數(shù)。

第一個(gè)為水平偏移量，第二個(gè)為垂直偏移量，第三個(gè)為模糊的像素寬度，第四個(gè)為顏色（可用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

值得注意的有三個(gè)：skew，rotate和scale。

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

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

效果：

接下來是rotate，rotate接受一個(gè)旋轉(zhuǎn)的角度，如代碼：

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

效果為：

最后是scale，定義 2D 縮放轉(zhuǎn)換。接受兩個(gè)值的時(shí)候是分別縮放寬度和高度，接受一個(gè)值的時(shí)候，高度和寬度都根據(jù)該值縮放。

如代碼：

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

效果為：

當(dāng)然，這三個(gè)屬性，我們也可以一起用，如代碼：

#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可以實(shí)現(xiàn)非常平滑的過渡，最重要的用法就是偽類用法，以前的hover偽類只能實(shí)現(xiàn)“瞬間”的變化，有的transition之后，可以實(shí)現(xiàn)平滑的過渡了。有設(shè)置四個(gè)過渡屬性：

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

transition-duration：過渡所需的時(shí)間。

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

transition-delay：過渡發(fā)生的延遲。

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

#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:名字，關(guān)于后續(xù)的關(guān)鍵幀的定義。

animation-duration：動畫時(shí)間。

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

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

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

#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;} }

?

轉(zhuǎn)載于:https://www.cnblogs.com/SKLthegoodman/p/3644318.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。