css3新的特性

2021-10-20 21:20:45 字數 1261 閱讀 8546

圓角邊框border-radius:水平值 垂直值

border-top-left-radius:1px 2px 		設定左上角圓角


border-bottom-right-radius 設定左下角圓角


border-top-left-radius 設定右上角圓角


border-bottom-right-radius 設定右下角圓角
陰影box-shadow:10px 10px 5px #888

文字陰影text-shadow:2px 2px 8px blue;//水平偏移 垂直偏移 陰影大小 顏色

長文字設定word-wrap

word-wrap:break-word;將長文字設定分行顯示。
@font-face規則來引用新的字型

type


="text/css"


>


@font-face


pstyle


>
2d轉換方法：對元素進行旋轉、縮放、移動、拉伸。

trasform:rolate(30deg);/*順時針旋轉30度。*/


trasform:scale(x,y) /*x表示水平方向的縮放，y表示垂直方向的縮放 


0-1表示縮小 >1表示放大*/
過渡transition：屬性名 持續時間 過渡方法

將元素的某個屬性從』乙個值』在指定的時間內過渡到』另乙個值』；



transiton-property 屬性名


transition-duration 過渡時間 


transition-timing-function 過渡使用的方法（函式）
動畫 animation 規則@keyframes



@keyframes mycolor //開始的時候


30%{} 


60%{}


100%{} //結束的時候


}div:hover
3d變換

trasform-style：preserve-3d;

trasform:rolatex(60deg); 設定水平方向的旋轉

perspective：100px ；設定透視關係。根據**者與舞台的距離來定。

CSS3有哪些新特性？CSS3新特性詳解

本篇文章給大家帶來的內容是關於css3有哪些新特性？css3新特性詳解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。新增選擇器 p nth child n 彈性盒模型 display flex 多列布局 column count 5 查詢 media max width 480px...

css3的新特性

1.文字陰影text shadow text shadow 偏移量x 偏移量y 模糊度 顏色 注意 水平偏移量 正值向右，負值向左 垂直偏移量 正值向下，負值向上 模糊度不能為負數 可設定多個text shadow，每個用逗號分隔 例子 text shadow 1px 2px 3px red,2px...

CSS3的新特性

css3實現圓角 border radius 陰影 box shadow 對文字加特效 text shadow 線性漸變 gradient 旋轉 transform transform rotate 9deg scale 0.85,0.90 translate 0px,30px skew 9deg,...