CSS3常用屬性

itwangchen發表於2019-03-22
CSSS3

CSS3

關係選擇器

  • ~ 選擇相鄰元素後面的所有兄弟元素

  • + 選擇相鄰元素後面的第一個兄弟元素

屬性選擇器

偽類選擇器

  • :before 在被選元素的內容前面插入內容

  • :after 在被選元素的內容後面插入內容

    • attr(屬性名) 將元素某一個屬性的內容作為插入的內容

  • :empty 選擇內容為空的元素

    • 案例：選擇頁面中所有內容為空並且href屬性以http開頭的a標籤，並將href屬性內容作為a標籤的內容

  • :not 排除選擇器

  • :last-child 選擇某一個元素父級下的最後一個子元素

  • :first-child 選擇某一個元素父級下的第一的子元素

  • :nth-child(length) 選擇某個元素父級下面的第length個子元素

    • nth-child(length) 引數是具體數字、length為整數、從1開始計算

    • nth-child(n) 引數是n、通常引數其他計算，從0開始計算

      • nth-child(n*length) n的倍數選擇，n從0開始算

      • nth-child(n+length) 選擇大於等於length後面的元素

      • nth-child(-n+length) 選擇小於等於length前面的元素

    • nth-child(even) 選擇偶數元素

    • nth-child(odd) 選擇奇數元素

思考：到底哪個元素被選中了?

<style>
    p:nth-child(1){
        color:red
    }        
</style>
<div style="border:1px solid red">
    <span>span</span>
    <p>p1</p>
    <p>p2</p>
</div>
<br>
<div style="border:1px solid green">
    <p>p1</p>
    <p>p2</p>
</div>複製程式碼

背景設定

背景尺寸

background-size 設定背景圖片尺寸

  • auto： 背景影象的真實大小。

  • cover： 背景圖片等比例縮放以撐滿容器（背景圖片有可能超出盒子大小）

  • contain： 背景圖片等比縮放以撐滿容器（背景影象不會超出盒子大小）

  • 直接設定大小 background-size: 100px 100px; 或者backgound-size: 10% 10%;

背景重複

  • round 如果背景圖片在平鋪的時候 有部分割槽域被擷取 round會將圖片本身縮小 以達到完全顯示圖片的目的

  • space 在水平方向上和豎直方向上 能平鋪多少張圖片就平鋪多少張圖片 剩餘的空隙平均分配

多背景

.el {
    background: 
        url(img/bg1.png) no-repeat left top,
        url(img/bg2.png) no-repeat right top,
        url(img/bg3.png) no-repeat left bottom,
        url(img/bg4.png) no-repeat right bottom;
}複製程式碼

內減盒模型

box-sizing： content-box / border-box;

過渡

什麼是過渡

某個css屬性p，有初始值a，有目標值b。如果指定p屬性為過渡顯示，那麼當p屬性從a變到b時，會有動畫效果。

過渡屬性

  • transition-property: 過渡屬性;

  • transition-duration: 動畫時間;

  • transition-timing-function: 動畫執行的速度效果;

  • transition-delay: 延遲

注意：通過偽類選擇器為元素新增過渡，動畫效果會被還原。

複合屬性

  • 某一個屬性發生變化時，執行動畫

    • transition: width 1s linear 2s;

  • 所有屬性變化時， 都執行動畫

    • transition: all 1s linear;

  • 幾個屬性變化時，各自執行動畫

    • transition: width 2s linear, height 1s ease 1s;

動畫速度效果

  • linear：勻速運動

  • ease： 慢快慢（預設值）

  • ease-in： 由慢到快

  • ease-out： 由快到慢

  • steps(integer)： 分多少步完成


2D轉換

通過CSS3中的2D轉換，我們可以對元素進行移動、縮放、旋轉、變形操作。

縮放 scale

  • scale(x, y) ：在x、y軸上對元素進行縮放，如果第二個引數未提供，取第一個引數的值。

  • scaleX() ：指定元素在X軸的縮放（水平方向）

  • scaleY() ：指定元素在Y軸的縮放（垂直方向）

  • 以自己的中心點進行縮放

平移

  • translate(x, y)： 在x、y軸上對元素進行移動，如果第二個引數未提供，則預設值為0。

  • translateX()： 指定元素在X軸的移動 （水平方向）

  • translateY()： 指定元素在Y軸的移動 （垂直方向）

  • 中心點水平或垂直移動

旋轉

  • rotate(0deg)： 指定元素的旋轉角度。

    • 座標軸也會跟著旋轉

變形

  • skew(x, y)： 在x、y軸上對元素進行扭曲（斜切）操作。如果第二個引數未提供，則預設值為0。

  • skewX()： 指定元素在X軸的扭曲（水平方向）

  • skewY()： 指定元素在Y軸的扭曲（垂直方向）

中心點

  • transform-origin： 指定元素在2D轉換中的中心點。

    • 語法： transform-origin: x y;

    • 值可以是關鍵字 left right top bottom 也可以是具體的畫素值

動畫

用@keyframes 動畫名 {}定義一個動畫

該動畫可以被多個元素重複使用

動畫屬性介紹

  • animation-name：動畫名稱

  • animation-duration：動畫的持續時間

  • animation-timing-function： 動畫的過渡型別

    • linear： 線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

    • ease： 平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

    • ease-in： 由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)

    • ease-out： 由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)

    • ease-in-out： 由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

  • animation-delay： 動畫延遲的時間

  • animation-iteration-count： 動畫的迴圈次數

  • animation-direction： 動畫是否反向運動

    • normal： 正常方向

    • reverse： 反方向執行, 從動畫結束狀態執行到動畫開始狀態

    • alternate： 動畫先正常執行再反方向執行，並持續交替執行

    • alternate-reverse： 動畫先反執行再正方向執行，並持續交替執行

  • animation-fill-mode： 動畫結束狀態

    • forwards： 儲存結束時狀態

    • backwards：結束還原

  • animation-play-state 設定動畫的執行狀態

    • paused 暫停

    • running 執行

  • animation: 複合寫法

    • anmatiton： boxAnimation 1s linear 2s alternate infinite forwards;

    • 解釋： 延遲兩秒(2s)， 勻速(linerar) 正常執行再反方向執行(alternate ) 執行 boxAnimation 動畫， 時長為1秒(1s)， 重複無限次(infinite)。

陰影

文字陰影

.text {
    text-shadow: offsetX offsetY blur color;
            /* 陰影水平方向偏移 陰影垂直方向偏移 陰影模糊程度 陰影顏色 */
    text-shadow: offsetX offsetY blur color, offsetX offsetY blur color;
            /* 多重陰影使用逗號隔開 */
}複製程式碼

CSS3常用屬性

盒子陰影

.box {
    box-shadow: offsetX offsetY blur spread color inset;
        /* 陰影水平方向偏移 陰影垂直方向偏移 陰影模糊程度 陰影大小 陰影顏色 內陰影 */
}複製程式碼

圓角

.box {
    border-radius: 20px; /* 四個角的圓角都是20px */
    border-radius: 20px 30px; /* 左上、右下圓角20px 右上、左下圓角30px */
    border-radius: 20px 30px 40px; /* 左上圓角20px 右上、左下圓角30px 右下圓角40px */
    border-radius: 20px 30px 40px 50px; /* 左上角開始順時針圓角分別為20px、30px、40px、50px */
}
.box {
   border-top-left-radius: 10px; /* 左上圓角10px */
   border-top-right-radius: 20px; /* 右上圓角20px */
   border-bottom-left-radius: 30px; /* 左下上圓角30px */
   border-bottom-right-radius: 40px; /* 右下圓角40px */
}
.box {
    width: 200px;
    height: 200px;
    border-radius: 50%; /* 當盒子為正方形時，呈現原形 */   
}
.box {
    width: 200px;
    height: 100px;
    border-radius: 100px/50px; /* 盒子呈現為橢圓形 */
}複製程式碼

案例：安卓機器人

CSS3常用屬性

漸變

  • 線性漸變：沿著某條直線朝一個方向產生漸變效果

    .box {
    background-image: linear-gradient(方向|角度, 顏色1 位置1, 顏色2 位置2, ...);
}複製程式碼

    • 方向

      • to top => 0deg

      • to right => 90deg

      • to bottom => 180deg （預設值）

      • to left => 270deg

    • 角度：任意角度

  • 映象漸變：徑向漸變指從一箇中心點開始沿著四周產生漸變效果

    .box {
    background-image: radial-gradient(形狀 大小 at 漸變中心點x位置 漸變中心點y位置, 顏色 顏色位置, 顏色 顏色位置 ...);
}複製程式碼

    • 形狀

      • circle 漸變始終保持圓形

      • ellipse（預設）漸變顏色的形狀會隨容器變化而變化

        • 如果容器形狀為正方形，則ellipse和circle顯示一樣

    • 大小

      • closest-side：最近邊

      • farthest-side：最遠邊

      • closest-corner：最近角

      • farthest-corner：最遠角（預設）

    • 漸變中心點位置

      • 可以是關鍵字 left top right bottom

      • 可以是具體的畫素值 100px 100px


相關文章