CSS3樣式
阿新 • • 發佈：2020-08-26
<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>
三角形
利用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;
有三點值得注意：
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。
<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，其輸出為一種型別的子型別，可用於型別值的地方。除了線性漸變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, ...);
效果如下：
卡券貼
在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)
<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>
效果如下：