Html 带阴影下划线的透视文本

我有下面的html结构，其中我用下划线和阴影来设置标题样式

.title{
字号：28px；
线高：1；
字母间距：0px；
文本阴影：2PX2PX#32c8ff；
文字装饰：下划线；
文本下划线位置：下方；
}

我的头衔

您可以在之前使用伪元素

模拟下划线：

.title{
显示：内联块；
字号：28px；
线高：1；
字母间距：0px；
位置：相对位置；
文本阴影：2PX2PX#32c8ff；
文字装饰：无；
}
.标题：：之前{
边框底部：2倍实心#000；
底部：0；
内容：“；
位置：绝对位置；
左：0；
右：0；
盒影：2px2p32c8ff；
}

您可以在

之前使用伪元素

模拟下划线：

.title{
显示：内联块；
字号：28px；
线高：1；
字母间距：0px；
位置：相对位置；
文本阴影：2PX2PX#32c8ff；
文字装饰：无；
}
.标题：：之前{
边框底部：2倍实心#000；
底部：0；
内容：“；
位置：绝对位置；
左：0；
右：0；
盒影：2px2p32c8ff；
}

查看以下内容：


.container{
宽度：200px；
高度：200px；
边框：1px实心#CCC；
保证金：0自动60像素；
位置：相对位置；
-webkit透视图：600px；
-moz透视图：600px；
-透视图：600px；
透视图：600px；
}
.头衔{
宽度：100%；
身高：100%；
位置：绝对位置；
背景：绿色；
字体大小：35px；
线高：1；
字母间距：0px；
文本阴影：2PX2PX#32c8ff；
文字装饰：下划线；
文本下划线位置：下方；
}
#旋转-x.标题{
-webkit变换：rotateX（45度）；
-moz变换：rotateX（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}

我的头衔
查看以下内容：


.container{
宽度：200px；
高度：200px；
边框：1px实心#CCC；
保证金：0自动60像素；
位置：相对位置；
-webkit透视图：600px；
-moz透视图：600px；
-透视图：600px；
透视图：600px；
}
.头衔{
宽度：100%；
身高：100%；
位置：绝对位置；
背景：绿色；
字体大小：35px；
线高：1；
字母间距：0px；
文本阴影：2PX2PX#32c8ff；
文字装饰：下划线；
文本下划线位置：下方；
}
#旋转-x.标题{
-webkit变换：rotateX（45度）；
-moz变换：rotateX（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}

我的头衔
另一种可能性：


.title、.subtitle{
字号：28px；
线高：1；
字母间距：0px；
文本阴影：2PX2PX#32c8ff；
文本对齐：居中；
}
.头衔{
边框底部：2倍实心；
盒影：2px2p32c8ff；
}
.集装箱{
显示：表格单元格；
-webkit变换：rotateX（45度）；
变换：rotateX（25度）；
}
.内容{
-webkit变换：rotateX（45度）；
变换：rotateX（25度）；
}

绿色和平组织
冲浪者
另一种可能性：


.title、.subtitle{
字号：28px；
线高：1；
字母间距：0px；
文本阴影：2PX2PX#32c8ff；
文本对齐：居中；
}
.头衔{
边框底部：2倍实心；
盒影：2px2p32c8ff；
}
.集装箱{
显示：表格单元格；
-webkit变换：rotateX（45度）；
变换：rotateX（25度）；
}
.内容{
-webkit变换：rotateX（45度）；
变换：rotateX（25度）；
}

绿色和平组织
冲浪者
我的正确解决方案如下：


.title{
显示：内联块；
位置：相对位置；
字号：28px；
线高：2.5；
字母间距：0px；
文本阴影：2PX2PX#32c8ff；
文字装饰：无；
}
.标题：：之前{
边框底部：4px实心#ffffff；
底部：0；
内容：“；
位置：绝对位置；
左：0；
右：0；
盒影：2px2p32c8ff；
利润率：11px 0px；
}
.副标题{
字号：28px；
线高：0.7；
字母间距：0px；
文本阴影：2PX2PX#32c8ff；
}
我的正确解决方案如下：


.title{
显示：内联块；
位置：相对位置；
字号：28px；
线高：2.5；
字母间距：0px；
文本阴影：2PX2PX#32c8ff；
文字装饰：无；
}
.标题：：之前{
边框底部：4px实心#ffffff；
底部：0；
内容：“；
位置：绝对位置；
左：0；
右：0；
盒影：2px2p32c8ff；
利润率：11px 0px；
}
.副标题{
字号：28px；
线高：0.7；
字母间距：0px；
文本阴影：2PX2PX#32c8ff；
}
您是否尝试过在不同的浏览器中查看它？如果它是CSS引擎中的一个bug，我也不会感到惊讶。。您使用的浏览器是什么？Chrome 58.0.3029.110（64位）您是否尝试过在不同的浏览器中查看它？如果它是CSS引擎中的一个bug，我也不会感到惊讶。。你用的是什么浏览器？Chrome 58.0.3029.110（64位）我刚刚添加了边距并更改了线条高度，效果很好！请看下面的内容，刚刚添加了边距并更改了线条高度，效果很好！见下文