css商品的原价与折扣 |css3图片转圈

首先，原价是商品的正常价格，一般来说就是没有打折前的价格。

<p>原价：200元</p>

而折扣是指打折后的价格与原价之间的差异，通常以百分比的形式表示。

<p>折扣：8折（20%OFF）</p>

例如一件原价为200元的商品，打8折之后，其折扣价为160元，那么折扣为多少呢？

<p>折扣：200元 - 160元 = 40元（即原价的20%）</p>

在CSS中，大家可以利用伪元素和一些特定的CSS属性来实现商品的原价和折扣功能。例如：

.item::before {  
content: "原价：200元";  
text-decoration: line-through;  
color: gray;  
}  
.item::after {  
content: "折扣：8折（20%OFF）";  
color: red;  
}

上述代码中，“::before”和“::after”是伪元素，能够为元素添加额外的内容。在这个例子中，“::before”表示商品的原价，“::after”表示商品的折扣。大家使用“content”属性来添加内容，并利用其他CSS属性来调整显示效果。

总之，在网购时，勿忘核对商品的原价和折扣，不要让自己掉入虚假折扣的陷阱中哦！