css3屬性

新特性

漸進增強和優雅降級

• 漸進增強
  • 先考慮低版本相容，再慢慢考慮高版本（更推薦）
• 優雅降級
  • 先考慮高版本，再考慮低版本

瀏覽器私有屬性字首

新增屬性

文字效果

1. text-shadow 文字陰影

.text1{
    text-shadow:5px 5px 5px pink;
}

• h-shadow 水平方位移動的陰影（正值向右，負值向左）
• v-shadow 垂直方位移動的陰影（正值向下，負值向上）
• blur 模糊的距離，只能是正值（可選引數）
• color 陰影的顏色 （可選引數）

2. box-shadow 盒子陰影

多個陰影用逗號隔開

陰影是不佔據位置的

div
{
   box-shadow: 1px 1px 11px 4px #888888 inset;
}

單邊盒子陰影

/*  上部 */
.top{
    box-shadow:0 -2px 0 red;
}

/*  右邊 */
.right{
    box-shadow:2px 0 0 green;
}

/*  底部 */
.bottom{
    box-shadow:0 2px 0 blue;
}

/*  左邊 */
.left{
    box-shadow:-2px 0 0 tomato;
}

3.word-break 強制換行

p.test {
    word-break:break-all;
}

4. word-wrap 單詞換行

.box{
    /* 網址換行 */
    word-wrap:break-word;
}
 

字型

@font-face

背景

1. background-clip 背景裁切

-webkit-background-clip:text;
color:transparent;
/* 或者 */
-webkit-text-fill-color:transparent;

2. background-origin背景原點

3. background-size 背景中影象的尺寸

• length percentage cover會在一定程度上裁剪的
• contain 不裁剪 ，保持原圖寬高比例

圓角

border-radius

如果你在 border-radius 屬性中只指定一個值，那麼將生成 4 個 圓角。

但是，如果你要在四個角上一一指定，可以使用以下規則：

• 四個值: 第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。
• 三個值: 第一個值為左上角, 第二個值為右上角和左下角，第三個值為右下角
• 兩個值: 第一個值為左上角與右下角，第二個值為右上角與左下角
• 一個值： 四個圓角值相同(50%)，即正圓

邊框圖片

1. background-image

顏色特性

hsl(色調，飽和度%，亮度%)

hsla(色調，飽和度%，亮度%，透明度)

亮度和飽和度需要加%

漸變

漸變是背景圖

線性漸變

.div:nth-child(1){
    background-image:linear-gradient(yellow,green,blue)
}

• 從下往上漸變 to top

    background-image:linear-gradient(to top,yellow,green,blue)
  

• 從左往右right

   background-image:linear-gradient(to right,yellow,green,blue)
  

• 右上對角漸變to right top

   background-image:linear-gradient(to right top,yellow,green,blue)
  

• 顏色多給一點

  background-image:linear-gradient(to right top,yellow 80%,green,blue)
  

徑向漸變

預設是橢圓

background-image:radial-gradient(circle,yellow 80%,green,blue)

背景圖

background:url(img/1.png) no-repeat left top,url(img/2.png) no-repeat right top,url(img/3.png) no-repeat left bottom,url(img/4.png) no-repeat right bottom