隨著互聯(lián)網(wǎng)的不斷發(fā)展,在線郵票已經(jīng)成為了一種趨勢,而CSS3郵票更是其中的一種。
.stamp { background-color: #fff; /*設(shè)置郵票背景色*/ border: 1px solid #999; /*設(shè)置郵票邊框*/ border-radius: 15px; /*設(shè)置郵票圓角*/ box-shadow: 1px 1px 2px #ccc; /*給郵票添加陰影*/ height: 80px; /*設(shè)置郵票高度*/ width: 100px; /*設(shè)置郵票寬度*/ padding: 10px; /*設(shè)置內(nèi)邊距*/ font-family: Arial, sans-serif; /*設(shè)置字體*/ font-weight: bold; /*設(shè)置字體加粗*/ text-align: center; /*設(shè)置文字居中*/ }
如上所示代碼就是創(chuàng)建一個CSS3郵票的核心代碼,通過設(shè)置背景色、邊框、圓角、陰影等樣式,使得郵票看起來十分逼真。
如需使用這樣的CSS3郵票,只需在html中加入以下代碼即可:
<div class="stamp"> <p>郵票內(nèi)容</p> </div>
在郵票內(nèi)容中可以自由添加所需信息,例如用戶頭像、文章題目等等,將郵票嵌入進(jìn)文本或作為網(wǎng)頁裝飾都是非常不錯的選擇。
總之CSS3郵票是一種十分實(shí)用的CSS技術(shù),不論是在文章排版中還是作為網(wǎng)頁裝飾,都能為網(wǎng)頁的設(shè)計(jì)增加一份美感。