當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

CSS3新特性罗列

發(fā)布時(shí)間：2023/12/2 CSS 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3新特性罗列小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

接觸CSS3這么久了，總是到要用的時(shí)候直接拿來(lái)用，卻沒(méi)有好好地總結(jié)歸納一下，那就在這里好好梳理一下吧。

CSS3邊框：

圓角邊框：

關(guān)鍵：border-radius

<!DOCTYPE html> <html> <head> <style> div { text-align:center; border:2px solid #a1a1a1; padding:10px 40px; width:350px; border-radius:25px; -moz-border-radius:25px; -webkit-border-radius:25px; } </style> </head> <body><div>圓角邊框</div></body> </html>

CSS3邊框陰影：

關(guān)鍵：box-shadow

語(yǔ)法：對(duì)象選擇器 {box-shadow:[投影方式,] X軸偏移量,Y軸偏移量[,陰影模糊半徑][,陰影擴(kuò)展半徑][,陰影顏色]}　

投影方式：此參數(shù)可選。如不設(shè)值，默認(rèn)投影方式是外陰影；如取其唯一值“inset”，其投影為內(nèi)陰影；

X-offset:陰影水平偏移量，其值可以是正負(fù)值。如果值為正值，則陰影在對(duì)象的右邊，其值為負(fù)值時(shí)，陰影在對(duì)象的左邊；

Y-offset:陰影垂直偏移量，其值也可以是正負(fù)值。如果為正值，陰影在對(duì)象的底部，其值為負(fù)值時(shí)，陰影在對(duì)象的頂部；

陰影模糊半徑：此參數(shù)可選，但其值只能是為正值，如果其值為0時(shí)，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；

陰影擴(kuò)展半徑：此參數(shù)可選，其值可以是正負(fù)值，如果值為正，則整個(gè)陰影都延展擴(kuò)大，反之值為負(fù)值時(shí)，則縮小；

陰影顏色：此參數(shù)可選。如不設(shè)定顏色，瀏覽器會(huì)取默認(rèn)色，但各瀏覽器默認(rèn)取色不一致，特別是在webkit內(nèi)核下的safari和chrome瀏覽器下表現(xiàn)為透明色，在Firefox/Opera下表現(xiàn)為黑色（已驗(yàn)證），建議不要省略此參數(shù)。

CSS3邊框圖片：

?關(guān)鍵：-webkit-border-image

?比如：

div { border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 round; /* Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ }

CSS3背景：

background-size 屬性規(guī)定背景圖片的尺寸

div { background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; }

background-origin 屬性規(guī)定背景圖片的定位區(qū)域

div { background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box; }

CSS3多重背景圖片

body { background-image:url(bg_flower.gif),url(bg_flower_2.gif); }

CSS3文字效果

CSS3文本陰影

h1 { text-shadow: 5px 5px 5px #FF0000; }

CSS3自動(dòng)換行

p {word-wrap:break-word;}

在新的 @font-face 規(guī)則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。

如需為 HTML 元素使用字體，請(qǐng)通過(guò) font-family 屬性來(lái)引用字體的名稱 (myFirstFont)：

CSS3 2D轉(zhuǎn)換

平移：translate

div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ }

旋轉(zhuǎn)：rotate

div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ }

縮放：scale

通過(guò) scale() 方法，元素的尺寸會(huì)增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)：

div { transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari 和 Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ }

翻折：skew

通過(guò) skew() 方法，元素翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)：

div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ }

CSS3 3d轉(zhuǎn)換

rotateX()

沿著X軸旋轉(zhuǎn)

rotateY()

沿著Y軸旋轉(zhuǎn)

CSS3過(guò)渡

通過(guò) CSS3，我們可以在不使用 Flash 動(dòng)畫(huà)或 JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果（平緩過(guò)渡）。

向?qū)挾取⒏叨群娃D(zhuǎn)換添加過(guò)渡效果：

div { transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; }

總結(jié)：

需要給定一個(gè)起點(diǎn)狀態(tài)和結(jié)束狀態(tài)，

然后給div添加transition:寬過(guò)渡時(shí)間，高過(guò)渡時(shí)間，轉(zhuǎn)換過(guò)渡時(shí)間

transition:[寬過(guò)渡時(shí)間][,高過(guò)渡時(shí)間][,轉(zhuǎn)換過(guò)渡時(shí)間]

CSS3 動(dòng)畫(huà)

設(shè)定動(dòng)作@keyframes

@keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }

設(shè)定動(dòng)作類

.myaction{
　　animation:myfirst 5s;
}

將動(dòng)作類加給DIV

$("...").addClass('.myaction');

注意：

語(yǔ)法：

animation:name duration timing-function delay iteration-count direction

name:@keyframes的名稱

duration:規(guī)定完成動(dòng)畫(huà)所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。

timing-function:規(guī)定動(dòng)畫(huà)的速度曲線。

timing-function的值	描述
linear	勻速
ease	慢快慢
ease-in	低速開(kāi)始
ease-out	低速結(jié)束
ease-in-out	低速開(kāi)始和結(jié)束
cubic-bezier(n,n,n,n)	在cubic-bezier函數(shù)中自己的值，從0到1