學會這些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>

效果如下：

在線代碼演示

總結

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