CSS3是一種用于網站設計的樣式語言,它最大的特點就是可以實現更多復雜的效果,其中之一便是可以用CSS3畫標簽。下面將通過實例來講解如何通過CSS3實現標簽的繪制。
.tag{ width: 80px; height: 30px; line-height: 30px; text-align: center; font-size: 14px; color: #fff; background-color: #ff6699; border-radius: 15px; -webkit-transform:skewX(-20deg); -moz-transform: skewX(-20deg); transform: skewX(-20deg); }
以上代碼指定了.tag類的樣式,其中width指定了標簽的寬度,height指定了標簽的高度,line-height指定了文本的行高,text-align指定了文本居中對齊,font-size指定了文本的字體大小,color指定了文本的顏色,background-color指定了標簽的背景顏色,border-radius指定了標簽的邊角半徑,-webkit-transform、-moz-transform和transform則是指定了標簽的傾斜旋轉效果,-20deg表示旋轉角度。
<div class="tag">標簽</div>
將以上CSS樣式應用到div標簽上,便可以得到一個簡單漂亮的標簽效果了。具體效果見下圖:
______________ |標簽 | |____________
通過這個例子,我們可以看出CSS3的強大之處,它可以讓我們在不使用任何圖片的情況下,輕松實現繪制各種漂亮的圖形效果,包括標簽、按鈕、背景、圖形等等。只要熟練掌握CSS3的使用,我們就可以輕松地打造出一個漂亮的網站了。
下一篇php a foo()