SS3有許多亮眼的特性，比如陰影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>
效果如下：
全屏灰色（特殊日期使用）
使用濾鏡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當中，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>
效果如下：
