CSS3新功能羅列
- 高洛峰原創
- 2017-02-23 10:33:551363瀏覽
接觸CSS3這麼久了，總是到要用的時候直接拿來用，卻沒有好好地總結歸納一下，那就在這裡好好梳理一下吧。
CSS3邊框：
圓角邊框：
關鍵：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邊框陰影：
關鍵：box-shadow
語法：物件選擇器{box-shadow:[投影方式,] X軸偏移量,Y軸偏移量[,陰影模糊半徑][,陰影擴展半徑][,陰影顏色]}
投影方式：此參數可選。如不設值，預設投影方式是外陰影；如取其唯一值“inset”，其投影為內陰影；
X-offset:陰影水平偏移量，其值可以是正負值。如果值為正值，則陰影在物件的右邊，其值為負值時，陰影在物件的左邊；
Y-offset:陰影垂直偏移量，其值也可以是正負值。若為正值，則陰影在物件的底部，其值為負值時，陰影在物件的頂部；
陰影模糊半徑：此參數可選，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴展半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都會延展擴大，反之值為負值時，則縮小；
陰影顏色：此參數可選。如不設定顏色，瀏覽器會取預設色，但各瀏覽器預設取色不一致，特別是在webkit核心下的safari和chrome瀏覽器下表現為透明色，在Firefox/Opera下表現為黑色（已驗證），建議不要省略此參數。
CSS3邊框圖片：
關鍵：-webkit-border-image
例如：
#p
{
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 屬性規定背景圖片的尺寸
p
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
} background-origin 屬性規定背景圖片的定位區域
p
{
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 規則中，您必須先定義字體的名稱（例如myFirstFont），然後指向該字體文件。 如需為HTML 元素使用字體，請透過font-family 屬性來引用字體的名稱(myFirstFont)：##c9ccee2e6ea535a969eb3f532ad9fe89 @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */}p{font-family:myFirstFont;}531ac245ce3e4fe3d50054a55f265927
#
CSS3 2D轉換
平移：translate
p
{
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 */
}
旋轉：rotate
##
p
{
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() 方法，元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）參數：
p
{
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() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數：
p
{
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轉換rotateX()沿著X軸旋轉rotateY()沿著Y軸旋轉 CSS3過渡透過CSS3，我們可以在不使用Flash 動畫或JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果（平緩過渡）。 為寬度、高度和轉換添加過渡效果：
p
{
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;
}
# 總結：##需要給定一個起點狀態和結束狀態，
然後給p加上transition:寬過渡時間，高過渡時間，轉換過渡時間
transition:[宽 过渡时间][,高 过渡时间][,转换 过渡时间]
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;
}
將動作類別加給p
$("...").addClass('.myaction');
注意：#語法：
animation:name duration timing-function delay iteration-count directionname:@keyframes的名稱duration:規定完成動畫所花費的時間，以秒或毫秒計。 timing-function:規定動畫的速度曲線。
timing-function的值
| linear | 勻速 |
| ease | 慢快慢 |
| ease-in | 低速開始 |
| ##ease-out |
delay：动画开始之前的延迟，秒。
iteration-count:规定动画播放的次数：具体数值或infinite（无限次）。
direction:规定是否轮流反向播放动画。normal正常播放，alternate轮流反向播放。
CSS3多列：
创建多个列对文本进行布局
p
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}CSS3用户界面
p
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
CSS3的新特性就梳理到这里啦。个人觉得转换和动画是重点，需要好好掌握。
更多CSS3新特性罗列 相关文章请关注PHP中文网！