CSS3經常使用屬性

CSS3

關係選擇器

• ~ 選擇相鄰元素後面的全部兄弟元素

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

屬性選擇器

• [屬性 = 屬性值]

  • ^= 以某值開頭

  • $= 以某值結尾

    • wenku.baidu.com/org/view?or…

  • *= 包含某值

僞類選擇器

• :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;
            /* 多重陰影使用逗號隔開 */
}複製代碼

盒子陰影

.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; /* 盒子呈現爲橢圓形 */
}複製代碼

案例：安卓機器人

漸變

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

  .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