標籤：style blog http color io os 使用 ar for
給定的html代碼是： <div class=‘square‘></div>
平常實現我們常是通過添加小的icon來實現，不僅需要添加圖片資源，還需要改動html結構。
CSS虛擬元素
css中虛擬元素有四個，分別是:first-line,:first-letter,:before,:after。其中前兩個分別選擇的是目標元素內第一行文本和第一個字母，可以為其添加多餘樣式。
而最常用的就是:before和:after，這兩個虛擬元素與前兩個的用法不同，而用處也更大。
:before,:after分別用於向當前元素前和後添加指定的content內容，具體案例用法如下：
<!doctype html><html><head><meta charset="utf-8"><title>CSS輸出各種圖形</title><style type="text/css"> p:before{ content:"開始"; color:#F00; font-size:12px; } p:after{ content:"結束"; color:#003; font-size:30px; border:1px solid #000; width:100px; }</style></head><body> <p>虛擬元素 測試</p></body></html>
上面代碼的運行結果
可以認為:before和:after兩個虛擬元素是添加到當前p標籤前後的兩個元素，但是應該也會發現在p:after中寫的width:100px;並沒有奏效，這就說明了虛擬元素的顯示是inline的，而不是block。
至於虛擬元素有幾個需要注意的地方：
1.虛擬元素在元素內部的顯示為inline，因此想要用虛擬元素實現更多效果，比如上面的題目，就必須把虛擬元素當做block元素來用。
2.虛擬元素列表屬性中content必不可少，即使內容為空白，content也不可為空，否則會不顯示。
3.虛擬元素content除了可以設定為文字之外，還可以設定為圖片，例如p:before{content:url(icon.gif);}
4.虛擬元素目前已經得到IE8及以上瀏覽器，可以放心使用。
用CSS做出來一個三角形或者別的形狀
掌握了虛擬元素之後，就可以實現上面的題目了。很明顯，是通過虛擬元素做出了一個三角形。怎麼做呢？
用CSS代碼實現三角形很簡單，嘗試一下就可以寫出來：，html代碼為<div class="triangle"></div>, css代碼如下
.trangle{width:0;height:0;border:40px solid; border-color:transparent transparent transparent #F00;}
別的形狀也是大同小異，通過設定不同的border-radius和border-width來實現，但是相容性有問題，IE9及以上才會正常（自然是border-radius的問題）。
但是可以看出來元素已經是用border勾勒出來的了，但是題目中的三角形是帶有黑色邊框的，很明顯不能通過一個虛擬元素來搞定，那就兩個一起。
通過設定虛擬元素的position:absolute和z-index屬性，構成虛擬元素的疊加，底層是黑色，上層是白色即可。
原題目的CSS具體實現代碼如下：
<!doctype html><html><head><meta charset="utf-8"><title>CSS輸出各種圖形</title><style type="text/css"> .square{width:100px;height:100px;background-color:#FFF;position:relative;border:2px #000000 solid;}.square:before{content:"";width:0px;height:0px;display:block;position:absolute;z-index:2;top:25%;right:-28px;border:15px solid #FFF;border-color:transparent transparent transparent #FFF;}.square:after{content:"";width:0px;height:0px;display:block;position:absolute;z-index:1;top:25%;right:-30px;border:15px solid #FFF;border-color:transparent transparent transparent #000;} </style></head><body> <div class=‘square‘></div></body></html>
[CSS]利用虛擬元素實現一些特殊圖形
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
