當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3新特性罗列

發(fā)布時間：2023/12/2 CSS 36 豆豆

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

接觸CSS3這么久了，總是到要用的時候直接拿來用，卻沒有好好地總結(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

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

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

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

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

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

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

陰影顏色：此參數(shù)可選。如不設定顏色，瀏覽器會取默認色，但各瀏覽器默認取色不一致，特別是在webkit內(nèi)核下的safari和chrome瀏覽器下表現(xiàn)為透明色，在Firefox/Opera下表現(xià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自動換行

p {word-wrap:break-word;}

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

如需為 HTML 元素使用字體，請通過 font-family 屬性來引用字體的名稱 (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

通過 scale() 方法，元素的尺寸會增加或減少，根據(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

通過 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過渡

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

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

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é)：

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

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

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

CSS3 動畫

設定動作@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;} }

設定動作類

.myaction{
　　animation:myfirst 5s;
}

將動作類加給DIV

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

注意：

語法：

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

name:@keyframes的名稱

duration:規(guī)定完成動畫所花費的時間，以秒或毫秒計。

timing-function:規(guī)定動畫的速度曲線。

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

delay：動畫開始之前的延遲，秒。

iteration-count:規(guī)定動畫播放的次數(shù)：具體數(shù)值或infinite（無限次）。

direction:規(guī)定是否輪流反向播放動畫。normal正常播放，alternate輪流反向播放。

CSS3多列：

創(chuàng)建多個列對文本進行布局

div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3; }

CSS3用戶界面

div { border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; }

CSS3的新特性就梳理到這里啦。個人覺得轉(zhuǎn)換和動畫是重點，需要好好掌握。

總結(jié)

以上是生活随笔為你收集整理的CSS3新特性罗列的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

新特性

上一篇：使用prismjs为网站添加代码高亮功能
下一篇： Flexible 弹性盒子模型之CSS