前端還在切圖？學完這些css，再也不用切圖了！

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

標題開個玩笑，實際上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，即陰影在邊框外，向外擴散。

有三點值得註意：

若元素設置了border-radius屬性，那麼陰影也會有圓角效果。

同一個元素可以設置多個陰影效果，使用逗號分隔。

同個元素上的多個陰影在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>

效果如下：

兩者區別

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

box-shadow是給元素“盒子”的添加陰影，drop-shadow是給元素“自身”增加陰影。
box-shadow支持陰影疊加，dropshadow不行。
參數值不同。有些瀏覽器drop-shadow不支持spread-radius，且drop-shadow沒有inset關鍵字。
相容性不同。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，其輸出為一種類型的子類型，可用於類型值的地方。除了線性漸變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>

效果如下：

總結

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