CSS3基礎知識（一）

結構選擇器

:nth-child(n) 第幾個元素 從1開始設置
:nth-child(2n) 偶數元素 從0開始設置
:nth-child(2n+1) 奇數元素
:nth-of-type(n)
:first-child ->nth-child(1)
:first-of-type ->nth-of-type(1)
:last-child
:last-of-type
:only-child 僅有一個子元素
:only-of-type 同種類型的子元素只有一個
:empty

否認選擇器

:not()

屬性選擇器

E[attr=val]
E[attr|=val] 只能等於val 或只能以val-開頭
E[attr*=val] 包含val字符串
E[attr~=val] 屬性值有多個,其中有一個是val
E[attr^=val] 以val開頭
E[attr$=val] 以val結尾

標僞類選擇器

:target 用來匹配url指向的目標元素
存在url指向該匹配元素時,樣式效果纔會生效

僞元素

: first-line 匹配第一行文本
: first-letter 匹配第一首字符
: before 和 : after DOM元素先後插入額外的內容

圓角border-radius

border-radius: 1-4個數字 / 1-4個數字

• 前面是水平半徑，後面是垂直半徑
• 四個數字方向分別是左上 右上 右下 左下
• 不給「/」則水平半徑和垂直半徑同樣
• • border-radius: 10px/5px;
• • border-radius:60px 40px 30px 20px /30px 20px 10px 5px;
• 例子 : 圓 橢圓 半圓 扇形

線性漸變

linear-gradient

• linear-gradient([ <起點> || <角度> ,]? <點> , <點> …)
• 只能用在背景上
• 顏色是沿着一條直線軸變化
• 參數
• 起點：從什麼方向開始漸變
  》left、top、left top
• 角度：從什麼角度開始漸變
  》xxx deg的形式
• 點：漸變點的顏色和位置
  》red 50%，位置可選
• 重複線性漸變

徑向漸變

• radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);
• 從「一個點」向多方向顏色漸變
• shape形狀 ： ellipse、circle 或設置水平半徑,垂直半徑
• size:漸變的大小，即漸變到哪裏中止，有以下關鍵詞:
  • closest-side：最近邊； farthest-side：最遠邊；
  • closest-corner：最近角； farthest-corner：最遠角 (默認值)
• position ：關鍵詞|數值|百分比
• 重複的徑向漸變

背景background

background-origin

padding-box 從padding區域顯示
border-box 從border區域顯示
content-box 從content區域顯示

background-clip

padding-box 從padding區域向外裁剪
border-box 從border區域往外裁剪
content-box 從content區域往外裁剪
text 文本裁剪

background-size

100% 100% 百分比
10px 10px 數值
contain 按原始比例收縮,背景圖顯示完整,但不必定鋪滿整個容器
cover 按原始比例收縮,背景圖可能顯示不完整,但鋪滿整個容器

background-attachment

背景圖片是滾動的仍是固定的 fixed(固定的) 默認是滾動的

盒子陰影

box-shadow: h v blur spread color inset;
h :水平方向偏移
v : 垂直方向偏移
blur : 模糊半徑
spread : 擴展半徑
color : 顏色
inset :加上這個表示內陰影 默認是外陰影

文本陰影

• text-shadow : x y blur color
• x軸偏移 y軸偏移 模糊度 顏色

• 多層陰影製做文字立體效果 ,設置多種顏色,中間以逗號隔開

• 文字添加邊框
  text-stroke: 2px blue
  • 經過設定1px的透明邊框，能夠讓文字變得平滑
  • 顏色設成透明能建立鏤空字體

濾鏡

-webkit-filter: normal; 正常

-webkit-filter: grayscale(1); 灰度，取值範圍0-1

-webkit-filter: brightness(0. 亮度，取值範圍0-1

-webkit-filter: invert(1); 反色5); ，取值範圍0-1, 0爲原圖，1爲完全反色以後

-webkit-filter: sepia(0.5); 疊加褐色，取值範圍0-1

-webkit-filter: hue-rotate(30deg); 色相（按照色相環進行旋轉，順時針方向，紅-橙-黃-黃綠-綠-藍綠-藍-藍紫-紫-紫紅-紅）此處爲疊加黃色濾鏡

-webkit-filter: saturate(4); 飽和度，取值範圍0 ~ *, 0爲無飽和度，1爲原圖，值越高飽和度越大

-webkit-filter: contrast(2); 對比度，取值範圍0 ~ *, 0爲無對比度（灰色），1爲原圖，值越高對比度越大

-webkit-filter: opacity(0.8); 透明度，取值範圍0 ~ 1, 0爲全透明，1爲原圖

-webkit-filter: drop-shadow(0 0 20px red); 陰影

遮罩

mask-image mask-position mask-repeat