<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • css新特性有哪些(詳細介紹css的9大新特性)


    1、透明度

    rgba和opacity都可以設置透明的。

    rgba(red, green, blue, alpha):alpha是0-1透明度,0時顏色為完全透明,1是完全不透明。

    opacity:index:index是0-1,設置整個元素的透明度。

    兩者區別:rgba是設置元素的字體或背景顏色加了透明度,其他樣式不受影響,opacity是影響整個元素包含其子元素都會設置透明度。

    2、圓角

    border-radius:為元素添加圓角邊框,border-radius可以簡寫也可以分別設置。與margin設置類似,可以設置一個值(表示四個圓角)、兩個值(第一個是左上角右下角,第二個值是右上角左下角)、三個值(第一個值是左上角,第二個值是右上角和左下角,第三個值是右下角)。

    border-radius: 10px;
    /* 等價于 */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;

    3、背景圖片

    新增背景圖片設置可以簡寫,也可以分開單獨設置。新增屬性及意義:

    • background-image /*設置背景圖路徑(相對和絕對路徑)*/
    • background-repeat /*背景圖是否重復,repeat-x水平方向重復;repeat-y垂直方向重復;no-repeat不重復;默認情況下兩個方向都重復*/
    • background-position /*背景圖對齊方式,默認是左上角;(100% 0)right top設置到右上角;(100% 100%)right bottom設置到右下角;(0 100%)left bottom設置到左下角;0 0(left top)設置到左上角;center center 水平和垂直方向都居中 */
    • background-attachment /*背景圖是固定還是滾動。fixed固定背景圖;scroll跟隨頁面滾動*/
    • background-size 背景圖片的尺寸。
    • backgroun-origin 規定background-position屬性相對于什么位置來定位。
    • background-clip 規定背景的繪制區域。

    4、陰影

    box-shadow:給元素添加陰影。

    語法:box-shadow:水平偏移 垂直偏移 [ 模糊半徑 陰影尺寸 陰影顏色 inset(內部陰影) ]

    text-shadow:給文字加陰影。

    語法:text-shadow:水平偏移 垂直偏移 [ 模糊半徑 陰影尺寸 陰影顏色 inset(內部陰影) ]

    5、漸變

    漸變有兩種:線性漸變和徑向漸變。

    線性漸變:從某個方向或角度開始定義漸變

    線性漸變語法(使用方向):background-image: linear-gradient(direction, color-stop1, color-stop2, …);

    direction不設置的時候默認從上到下,可以設置的方向屬性值有to bottom、to top、to right、to left、to bottom right。

    線性漸變語法(使用角度):background-image: linear-gradient(angle, color-stop1, color-stop2, …);

    angle角度設置時 數字加deg。

    徑向漸變:從中心開始定義漸變

    徑向漸變語法:background-image: radial-gradient(shape size at position, start-color, …, last-color);

    6、轉換

    css3的轉換可以對元素進行伸縮、縮放、旋轉、移動等。轉換可分為2D轉換和3D轉換。

    2D轉換有scale(縮放)、rotate(旋轉)、translate(移動)、skew(沿x或y軸旋轉)、matrix簡寫各種2D轉換。

    • translate(x,y):指定元素在二維空間中的位移。X軸方向向右,Y軸方向向下。
    • translateX(n):指定元素在X軸中的位移。
    • translateY(n):指定元素在Y軸中的位移。
    • scaleX(n):定義 X 軸方向的縮放轉換。
    • scaleY(n):定義 Y 軸方向的縮放轉換
    • skew(x-angle,y-angle):定義沿著 X 和 Y 軸的 2D 傾斜轉換。
    • skewX(angle):定義沿著 X 軸的 2D 傾斜轉換。
    • skewY(angle):定義沿著 Y 軸的 2D 傾斜轉換。

    matrix 方法有六個參數,包含旋轉,縮放,移動(平移)和傾斜功能。

    實例: 利用matrix()方法旋轉div元素30°
    transform : matrix( 0.866 , 0.5,-0.5,0.866,0,0);
    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
    3D轉換

    3D轉換

    • translated3d(x,y,z):指定元素在三維空間的位移。
    • translatedX(x) :指定元素在x軸中的位移。
    • translatedY(y) :指定元素在y軸中的位移。
    • translatedZ(z) :指定元素在z軸中的位移。
    • scale3d(x,y,z):定義 3D 縮放轉換。
    • scaleX(x):通過設置 X 軸的值來定義縮放轉換。
    • scaleY(y):通過設置 Y 軸的值來定義縮放轉換。
    • scaleZ(z):通過設置 Z 軸的值來定義縮放轉換。
    • rotate3d(x,y,z,angle):定義 3D 旋轉。
    • rotateX(x):定義沿著 X 軸的 3D 旋轉。
    • rotateY(y):定義沿著 Y 軸的 3D 旋轉。
    • rotateZ(z):定義沿著 Z 軸的 3D 旋轉。

    7、過渡

    transition :設置元素要過渡的效果,總共有四個屬性,可簡寫。

    • transition-property:規定應用過渡的 CSS 屬性的名稱。
    • transition-duration:定義過渡效果花費的時間。默認是 0。
    • transition-timing-function :規定過渡效果的時間曲線。默認是 “ease”。
    • transition-delay:規定過渡效果何時開始。默認是 0。

    可簡寫為:

    transition: property duration timing-function delay;

    8、動畫

    animate:為元素添加動畫,是一個簡寫屬性。也可以拆分設置。

    • animation-name:規定動畫名稱
    • animation-duration:規定一個動畫周期所花費的時長ms或s為單位。
    • animation-timing-function:規定動畫的速度曲線。
    • animation-fill-mode:規定動畫不播放時的元素樣式。
    • animation-delay:規定動畫延遲多久執行。
    • animation-iteration-count:動畫播放次數。
    • animation-direction:規定動畫下一期是否逆向播放。
    • animation-paly-state:動畫運行狀態。

    可簡寫為:

    animation: name duration timing-function delay iteration-count paly-state;

    9、文本效果

    word-break:定義如何換行。屬性值有normal(瀏覽器默認換行規則)、break-all(允許在單詞內換行)、keep-all(只能在半角空格或連字符處換行)。

    word-wrap:允許長的內容可以自動換行。屬性值有normal,break-word。

    text-overflow :指定文本溢出包含他的元素,應該發生什么。屬性值有clip(修剪文本)、ellipsis(顯示省略號)、string(給定的字符串來代表被修剪的文本)。

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费