Html CSS-具有样式和颜色的多个文本装饰

我想用

文本装饰
制作一个带有
红色波浪下划线
和
蓝色虚线的文本
这是我的代码：（只在Mozilla Firefox中工作）（不工作，因为只在上面显示）


span{
字体大小：40px；
文字装饰：下划线波浪红色；
文字装饰：上划线蓝色虚线；
}
某些文本
一个css属性不能同时有两个值

解决方法：将文本包装到另一个
span
中，并为每个span添加单独的文本装饰：


span{
字体大小：40px；
}
.波浪{
文字装饰：下划线波浪红色；
}
.虚线{
文字装饰：上划线蓝色虚线；
}

一些文本
试试这个：


span{
位置：相对位置；
文字装饰：下划线波浪红色；
边框顶部：2件蓝色虚线；
}
一些文本
一个文本需要跨越多行，即使是一个标题也需要智能手机上的窄视口。

这是一个使用线性渐变的多行解决方案（其中两个用于重现虚线）：

（仅使用字体大小和行高的两个变量）


span{
字体大小：40px；
线高：1.5；
文字装饰：下划线波浪红色；
/*文字装饰：上划线蓝色虚线*/
背景图像：
线性渐变（向右，白色0，白色50%，透明50%，透明100%），
线性梯度（至底部，蓝色0，蓝色1px，透明1px，透明100%）；
背景尺寸：
8px 100%，
100%60px；
背景位置：左上、左上；
背景重复：重复，重复；
}
一些文本

另外，
多行
您可以使用
文本装饰行
指定多行。您可能认为可以为每一行指定不同的颜色和样式，但是，这不起作用，您可以在这里看到：


span{
/*这不行*/
文字装饰线：下划线上划线；
文字装饰风格：波浪虚线；
文字装饰颜色：红蓝；
}
一些文本
谢谢。但这只是一种方法吗？好的。谢谢，我如何修改
边框顶部
位置以获得删除线效果？谢谢。好主意。