《CSS3揭秘》上（邊框，投影，漸變，條紋效果，螞蟻行軍）

最近看了《CSS3揭秘》一書，里面真的是干貨滿滿呀，現將常用到的一些技巧歸納總結，便於日后用到查找。不得不感嘆學無止境哦~

1、邊框與背景

半透明邊框

.demo{
  background-color: #fff;
  border: rgba(255, 255, 255, 0.5) 10px solid;
  background-clip: padding-box; 
}

技巧歸納：使用背景剪切屬性，將背景的顯示不包含邊框
background-clip：對背景進行剪切，這個是根據css的盒模型分的：

• border-box(背景包含到邊框)
• padding-box(背景只包含到邊距)
• content-box(背景只包含到內容)

多重邊框

.demo{ 
    outline: #fff 1px dashed;
    outline-offset: -10px;
}

技巧歸納
outline：是繪制於元素周圍的一條線，位於邊框邊緣的外圍
outline-offset：設置輪廓的偏移位置

邊框內圓角

.demo{
 border-radius: 8px;
 box-shadow: 0 0 0 8px #655;
}

技巧歸納：利用陰影的特性實現
box-shadow：h-shadow(水平陰影的位置) v-shadow(垂直陰影的位置) blur(模糊距離) spread(陰影的尺寸) color(陰影顏色) inset(內部陰影)

條紋效果

.demo{
 background: linear-gradient(to right, #fb3 50%, #58a 0);
 background-size: 30px 100%;   
}

技巧歸納：利用線性漸變的特性實現
linear-gradient：(漸變方向，起始顏色，結束為止，結束顏色，起始位置) 說實在的，這個真的需要多體驗才能理解~
background-size：背景大小的設置

.demo{
 background: repeating-linear-gradient(45deg, #fb3 0,#fb3 15px,#58a 15px,#58a 30px);
}

技巧歸納：利用重復線性漸變的特性實現，支持角度設置

螞蟻行軍

這個效果，之前用過svg實現過，原來css3也是可以的。這里的原理是利用多重背景實現的，你需要理解background的各屬性特性呀。（動態效果請訪問螞蟻行軍效果）

.demo {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 1px solid transparent;
    background-image: 
    linear-gradient(white,white),
    repeating-linear-gradient(-45deg, black 0, black 25%, white 25%, white 50%);
    background-size: 20px 20px;
    background-clip: padding-box,border-box;
    background-position: 0;
    animation: ants 12s linear infinite;
}

@keyframes ants{
    to{
        background-position: 100%;
    }
}

2、形狀

橢圓

• 自適應的橢圓
  

.demo{
    border-radius: 50% / 50%;
}

技巧歸納：border-radius支持2個參數，分別是橫坐標，縱坐標。可以是像素也可以是百分比

• 半橢圓
  

.demo{
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
}

技巧歸納：border-radius支持8個參數，分別是上左，上右，下左，下右

• 四分之一的圓
  

.demo{
    border-radius: 0 100% 0 0;
}

三角形

.demo{
    -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.demo:hover{
    -webkit-clip-path: circle(100px at 50% 50%);
} 

技巧歸納：clip-path剪切路徑

切角

.demo {
    background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
    linear-gradient(-135deg, transparent 15px, #655 0) top right,
    linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
    linear-gradient(45deg, transparent 15px, #655 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

折角

.demo {
    background: linear-gradient(-135deg, transparent 15px, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 21.4px 21.4px,
                linear-gradient(-135deg,transparent 15px, #58a 0)
}

3、投影

單側投影

.demo {
    background-color: #fffbbb;
    box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .5);
}

雙側投影

.demo {
   box-shadow: 6px 0px 4px -4px rgba(0, 0, 0, .5),
               -6px 0px 4px -4px rgba(0, 0, 0, .5)
}

技巧歸納：利用box-shadow的第四個參數：擴張半徑，這個參數會根據指定的值擴大或者縮小投影的尺寸