1. 前言
CSS即层叠样式表，用于网页排版样式的控制。其中一项重要的样式属性就是删除线，这在网页中很常见，特别是在商品价格上。本文将会深入探讨如何设置删除线的粗细，以及在具体应用场景中的使用方法。
2. 删除线（text-decoration）属性介绍
text-decoration属性是CSS中的文本修饰属性，包括下划线、删除线和文本颜色等。在本文中，我们只关注删除线（line-through）的应用。
要设置删除线，只需要给指定的文本加上text-decoration:line-through即可：
.delete{
text-decoration: line-through;
}
这样，.delete元素中的文本将会被自动添加上删除线。然而，这只是默认情况下的删除线样式，它不具有强制性。
2.1 关于text-decoration样式
在设置text-decoration的时候，开发者可选择的属性不仅仅是line-through。实际上，具体常用的属性如下：
none（无修饰）
underline（下划线）
overline（上划线）
line-through（删除线）
blink（闪烁）
想要设置删除线的粗细，需要通过其他属性值的组合来实现。
3. 如何设置删除线的粗细
在CSS中，想要设置删除线的粗细，需要用到text-decoration-style和text-Decoration-width属性。
其中text-decoration-style属性定义了文本修饰线的样式类型，常用的值有：
solid（实线）
double（双线）
dotted（点线）
dashed（虚线）
wavy（波浪线）
text-decoration-width属性定义了文本修饰线的宽度。
具体方法如下：
.delete{
text-decoration: line-through;
text-decoration-style: double;
text-decoration-width: 4px;
}
这样，删除线就具有了双线框，粗细为4px。
当然，text-decoration-style和text-decoration-width也可组合使用，以实现其他的效果。
4. 在应用场景中使用
商品价格中的删除线是很常见的一个应用场景。在这种情况下，开发者可能需要自定义删除线的粗细，以达到视觉效果上最佳的效果。
现在，我们以京东网页上的价格为例，具体展示在删除线外加强细线条的效果。
首先，我们找到京东网站的价格原始样式：
可以看到，删除线虽然有一些修饰，但是却相对比较粗，需要进行进一步的调整。
接下来，我们添加若干个属性值到.text-price类的样式中。
.text-price{
text-decoration: line-through;
text-decoration-style: solid;
text-decoration-width: 1px;
position: relative;
font-size: 14px;
color: #999;
}
.text-price::after{
content: '';
position: absolute;
bottom: 4px;
left: 0;
right: 0;
height: 1px;
background-color: #999;
z-index: -1;
}
.text-price strong{
display: inline-block;
position: relative;
margin-left: 10px;
color: #c00;
font-size: 16px;
font-weight: 700;
}
通过::after伪元素的添加，我们在删除线下方添加了一条细线条。同时，还对删除线后面的珍惜元素加粗、变色等操作。
到此为止，效果便具备了：
以上就是本篇文章的全部内容。通过学习text-decoration-style和text-decoration-width属性，我们可以实现删除线的精细调整，达到最佳的视觉效果。