色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3實現優惠券樣式

劉柏宏2年前13瀏覽0評論

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來添加優惠券的特別樣式,并且定義了內容區域的樣式,包括標題和文本。通過這些代碼的設置,我們就可以實現一個美觀的優惠券樣式。