Open ccforward opened 8 years ago
其实很简单:
text-decoration: underline
或者
a[href] { border-bottom: 1px solid #333; text-decoration: none; }
虽然用 border-bottom 模拟下划线可以对颜色、线宽、线型进行控制,但是明显这些下划线和文本之间的间距太大。如图:
当然可以给a标签加一个 display:inline-block; 再制定一个小一点的 line-height:
display:inline-block;
line-height
display: inline-block; border-bottom: 1px solid #333; line-height: .9;
但是一旦换行就悲剧了,阻止了正常的文本换行:
其实还可以用一层内嵌的 box-shadow: 0 -1px #333 inset让鲜花县李文本近一些,但是微乎其微只是近了线宽那么一点的距离,不明显。
box-shadow: 0 -1px #333 inset
最佳的解决方案是用意想不到的 background-image
background-image
background: linear-gradient(#f00, #f00) repeat-x; background-size: 100% 1px; background-position: 0 1em;
这样就显得很优雅柔和了
不过还有问题,字母 p 和 y 被下划线穿过了,如果遇到字母能自动避开会更好,所以,加入背景是一片实色,即可以设置两层与背景色相同的 text-shadow 来模拟这种效果
text-shadow
background: linear-gradient(#f00, #f00) repeat-x; background-size: 100% 1px; background-position: 0 1em; text-shadow: .05em 0 #fff, -.05em 0 #fff;
使用背景渐变来实现下划线可以做到相当灵活的转换:
比如一条绿色虚线下划线
background: linear-gradient(90deg, #f00 70%, transparent 0) repeat-x; background-size: .2em 2px; background-position: 0 1em; text-shadow: .05em 0 #fff, -.05em 0 #fff;
通过色标的百分比调整虚线的虚实比例, 用 background-size 来调整虚线的疏密。
demo地址
给文字加上下划线 - 《css揭秘》笔记
其实很简单:
text-decoration: underline
或者
虽然用 border-bottom 模拟下划线可以对颜色、线宽、线型进行控制,但是明显这些下划线和文本之间的间距太大。如图:![](http://ww3.sinaimg.cn/large/72f96cbagw1f67qdziceej20ve03agm9.jpg)
当然可以给a标签加一个
display:inline-block;
再制定一个小一点的line-height
:但是一旦换行就悲剧了,阻止了正常的文本换行:![](http://ww3.sinaimg.cn/large/72f96cbagw1f67qi4nu5pj20kl04bdgh.jpg)
其实还可以用一层内嵌的
box-shadow: 0 -1px #333 inset
让鲜花县李文本近一些,但是微乎其微只是近了线宽那么一点的距离,不明显。解决方案
最佳的解决方案是用意想不到的
background-image
这样就显得很优雅柔和了![](http://ww4.sinaimg.cn/large/72f96cbagw1f67qutxbm9j20jx047gm9.jpg)
不过还有问题,字母 p 和 y 被下划线穿过了,如果遇到字母能自动避开会更好,所以,加入背景是一片实色,即可以设置两层与背景色相同的
text-shadow
来模拟这种效果使用背景渐变来实现下划线可以做到相当灵活的转换:
比如一条绿色虚线下划线
通过色标的百分比调整虚线的虚实比例, 用 background-size 来调整虚线的疏密。
demo地址