CSS3是一種用于網頁設計的語言,可以為網頁添加各種炫酷的效果,其中就包括實現優惠券樣式。下面我們來看一下如何使用CSS3實現優惠券樣式。
.coupon { position: relative; width: 300px; height: 150px; margin: 50px auto; background: #fff; border: 2px dashed #aaa; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); overflow: hidden; } .coupon:before { content: " "; position: absolute; top: -20px; right: -20px; border-top: 60px solid #fe7c7f; border-left: 60px solid transparent; } .coupon:after { content: "50% OFF"; position: absolute; top: -10px; right: -10px; background: #fe7c7f; color: #fff; font-size: 24px; font-weight: bold; padding: 10px 15px; transform: rotate(45deg); } .coupon .content { position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; background: #eee; border: 2px solid #aaa; padding: 10px; } .coupon .content h3 { font-size: 18px; margin-top: 0; } .coupon .content p { font-size: 14px; }
上面的代碼中,我們定義了一個coupon類,其中使用了偽類:before和:after來添加優惠券的特別樣式,并且定義了內容區域的樣式,包括標題和文本。通過這些代碼的設置,我們就可以實現一個美觀的優惠券樣式。
上一篇css ie8 兼容模式
下一篇css ie8奇偶設置