學會這些CSS，休想讓我切圖！！！

標題開個玩笑，實際上CSS3有許多亮眼的特性，比如陰影shadow、動畫animation、形變transform、漸變gradient、濾鏡filter等，合理運用這些特性，可以實現許多高大上的效果。如果覺得有用請點個贊或者收藏。

三角形

利用border-color支援transparent這一特性，隱藏三條邊框，實現三角形。

<style>
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  box-sizing: border-box;
  border-width: 0 10px 10px;
  border-color: transparent transparent #c5c5c5 transparent;
}
</style>
<div class="triangle"></div>

效果如下：

線上程式碼演示

左上三角形

<style>
.left-top-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  box-sizing: border-box;
  border-width: 10px;
  border-color: #c5c5c5 transparent transparent #c5c5c5;
}
</style>
<div class="left-top-triangle"></div>

效果如下：

線上程式碼演示

正五邊形

<style>
.pentagon {
  width: 54px;
  position: relative;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: #c5c5c5 transparent;
}

.pentagon::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: -85px;
  left: -18px;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent #c5c5c5;
}
</style>
<div class="pentagon"></div>

效果如下：

線上程式碼演示

氣泡框

使用絕對定位進行三角形覆蓋，實現氣泡框突出部分。

<style>
.bubble-tip {
  width: 100px;
  height: 30px;
  line-height: 30px;
  margin-left: 10px;
  border: 1px solid #c5c5c5;
  border-radius: 4px;
  position: relative;
  background-color: #fff;
}
.bubble-tip::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #ffffff transparent transparent;
  position: absolute;
  top: 5px;
  left: -10px;
  z-index: 2;
}
.bubble-tip::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #c5c5c5 transparent transparent;
  position: absolute;
  top: 5px;
  left: -11px;
  z-index: 1;
}
</style>
<div class="bubble-tip"></div>

效果如下：

線上程式碼演示

陰影效果

box-shadow實現

語法：

box-shadow: offest-x offest-y blur-radius spread-radius color inset;

值	是否必選	描述
offest-x	是	陰影水平偏移量。正值陰影則位於元素右邊，負值陰影則位於元素左邊。
offest-y	是	陰影垂直偏移量。正值陰影則位於元素下方，負值陰影則位於元素上方。
blur-radius	否	陰影模糊半徑。值越大，模糊面積越大，陰影就越大越淡。不能為負值。預設為0，此時陰影邊緣銳利。
spread-radius	否	陰影擴散半徑。取正值時，陰影擴大；取負值時，陰影收縮。預設為0，此時陰影與元素同樣大。
color	否	陰影顏色
inset	否	陰影擴散方向的關鍵字之一，改變陰影擴散為朝內。預設關鍵字為outset，即陰影在邊框外，向外擴散。

有三點值得注意：

1. 若元素設定了border-radius屬性 ，那麼陰影也會有圓角效果。
2. 同一個元素可以設定多個陰影效果，使用逗號分隔。
3. 同個元素上的多個陰影在z軸上，按照第一個陰影在最上面的順序依次排列。

<style>
.box-shadow {
  width: 500px;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 -1em 1em rgba(100, 150, 200, .5) inset,
              0 0 0 2px #ff3333,
              0.3em 0.3em 0.5em 10px rgb(198, 200, 100);
}
</style>

<div class="box-shadow">
  明月幾時有，把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間。
  轉朱閣，低綺戶，照無眠。不應有恨，何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千里共嬋娟。
</div>

效果如下：

線上程式碼演示

filter濾鏡實現

filter屬性將模糊或顏色偏移等圖形效果應用於元素。通常用於調整影像，背景和邊框的渲染。配合其內建函式，可以實現許多豐富多彩的效果。比如陰影影像、灰度影像等。詳見filter-MDN。

函式	描述
url()	接受一個XML檔案，該檔案設定了 一個SVG濾鏡，且可以包含一個錨點來指定一個具體的濾鏡元素。例如：filter: url(resources.svg#element-id)
blur(radius)	“radius”一值設定高斯函式的標準差，或者是螢幕上以多少畫素融在一起，所以值越大越模糊；如果沒有設定值，則預設是0；這個引數可設定css長度值，但不接受百分比值。
brightness()	給圖片應用一種線性乘法，使其看起來更亮或更暗。如果值是0%，影像會全黑。值是100%，則影像無變化。其他的值對應線性乘數效果。值超過100%也是可以的，影像會比原來更亮。如果沒有設定值，預設是1。
contrast()	調整影像的對比度。值是0%的話，影像會全黑。值是100%，影像不變。值可以超過100%，意味著會運用更低的對比。若沒有設定值，預設是1。
drop-shadow()	給影像設定一個陰影效果。陰影是合成在影像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。與上面box-shadow屬性值相似，不過沒有inset/outset關鍵字。
grayscal	將影像轉換為灰度影像。值定義轉換的比例。值為100%則完全轉為灰度影像，值為0%影像無變化。值在0%到100%之間，則是效果的線性乘子。若未設定，值預設是0。可參考下面全屏灰色的例子。
hue-rotate()	給影像應用色相旋轉。“angle”一值設定影像會被調整的色環角度值。值為0deg，則影像無變化。若值未設定，預設值是0deg。該值雖然沒有最大值，超過360deg的值相當於又繞一圈。
invert()	反轉輸入影像。值定義轉換的比例。100%的價值是完全反轉。值為0%則影像無變化。值在0%和100%之間，則是效果的線性乘子。 若值未設定，值預設是0。
opacity()	轉化影像的透明程度。值定義轉換的比例。值為0%則是完全透明，值為100%則影像無變化。值在0%和100%之間，則是效果的線性乘子，也相當於影像樣本乘以數量。 若值未設定，值預設是1。該函式與已有的opacity屬性很相似，不同之處在於通過filter，一些瀏覽器為了提升效能會提供硬體加速。
saturate()	轉換影像飽和度。值定義轉換的比例。值為0%則是完全不飽和，值為100%則影像無變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。 若值未設定，值預設是1。
sepia()	將影像轉換為深褐色。值定義轉換的比例。值為100%則完全是深褐色的，值為0%影像無變化。值在0%到100%之間，則是效果的線性乘子。若未設定，值預設是0。

<style>
.filter-shadow {
  width: 500px;
  padding: 20px;
  filter: drop-shadow(0.3em 0.3em 0.5em rgb(198, 200, 100));
}
</style>

<div class="filter-shadow">
  明月幾時有，把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間。
  轉朱閣，低綺戶，照無眠。不應有恨，何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千里共嬋娟。
</div>

效果如下：

線上程式碼演示

兩者區別

其實程式碼和效果上就可以看出來：

1. box-shadow是給元素“盒子”的新增陰影，drop-shadow是給元素“自身”增加陰影。
2. box-shadow支援陰影疊加，dropshadow不行。
3. 引數值不同。有些瀏覽器drop-shadow不支援spread-radius，且drop-shadow沒有inset關鍵字。
4. 相容性不同。box-shadow從IE9就開始支援，而drop-shadow從IE13才開始支援。詳見css-boxshadow 、css-filters

全屏灰色（特殊日期使用）

使用濾鏡filter的grayscale函式。

<style>
.filter {
  -webkit-filter: grayscale(100%); /* webkit */
  -moz-filter: grayscale(100%); /*firefox*/
  -ms-filter: grayscale(100%); /*ie9*/
  -o-filter: grayscale(100%); /*opera*/
  filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /*ie*/
  filter: gray; /*ie9- */
}
</style>
<html class="filter">
  <img src="https://cdn.pixabay.com/photo/2015/04/20/17/01/flower-731830_960_720.jpg" />
</html>

效果如下：

線上程式碼演示

漸變

CSS3的一個重要特性就是漸變gradients，其輸出為一種<image>型別的子型別，可用於<image>型別值的地方。除了線性漸變linear-gradient和radial-gradient以外，還能支援重複線性漸變repeating-linear-gradient和重複徑向漸變repeating-radial-gradient。實現斑馬線就是依靠重複線性漸變。詳見gradient-MDN。

斑馬線

利用重複線性漸變repeating-linear-gradient。語法如下：

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

值	描述
angle	定義漸變的角度方向。從 0deg 到 360deg，預設為 180deg。
side-or-corner	指定線性漸變的起始位置。由兩個關鍵字組成：第一個為指定水平位置(left 或 right)，第二個為指定垂直位置（top 或bottom）。 順序是隨意的，每個關鍵字都是可選的。
color-stop1, color-stop2,…	指定漸變的起止顏色，由顏色值、停止位置（可選，使用百分比指定）組成。

<style>
.zebra-crossing {
  width: 500px;
  height: 300px;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 25px, #000 25px, #000 50px);
}
</style>
<div class="zebra-crossing"></div>

效果如下：

線上程式碼演示

卡券貼

在CSS3當中，background新增了background-size屬性，控制背景圖片的大小，配合background-position屬性，可以在一個背景下面展示多張圖片。詳見background-MDN。

卡券貼的核心是使用透明白色徑向漸變radial-gradient，分別讓4張背景圖中的左下角、右下角、右上角和左下角出現預設，再利用drop-shadow實現元素陰影，從而達到效果。

radial-gradient語法如下：

radial-gradient(shape size at position, start-color, ..., last-color)

值	描述
shape	確定圓的型別: ellipse (預設): 指定橢圓形的徑向漸變。 circle ：指定圓形的徑向漸變
size	定義漸變的大小，可能值： farthest-corner (預設) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角 closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊 closest-corner ： 指定徑向漸變的半徑長度為從圓心到離圓心最近的角 farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
position	定義漸變的位置。可能值： center（預設）：設定中間為徑向漸變圓心的縱座標值。 top：設定頂部為徑向漸變圓心的縱座標值。 bottom：設定底部為徑向漸變圓心的縱座標值。 可混合使用，如top right
start-color, …, last-color	用於指定漸變的起止顏色。

<style>
.coupon{
  width: 200px;
  height: 80px;
  background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right / 50% 40px no-repeat,
    radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 40px no-repeat,
    radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 40px no-repeat,
    radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 40px no-repeat;
  filter: drop-shadow(3px 3px 3px #c5c5c5);
}
</style>

<div class="coupon"></div>

線上程式碼演示

文字溢位自動省略號

核心是CSS3屬性text-overflow: ellipsis。

<style>
.ellipsis {
  width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<div class="ellipsis">
  明月幾時有，把酒問青天。不知天上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間。
  轉朱閣，低綺戶，照無眠。不應有恨，何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但願人長久，千里共嬋娟。
</div>

效果如下：

線上程式碼演示

總結

別打了，別打了，我切還不行嗎！！真香~~~