CSS自定义下划线-动力节点
2020-10-13 17:11
1331 查看
尽管CSS有一个下划线属性text-decoration: underline,但这个属性非常简陋而且不能修改效果。
解决方案一
使用border属性
{
border-bottom: 1px solid gray;
text-decoration: none;
}
使用border-bottom模拟出来的下划线可以自定义颜色、线条宽度和线的形状。但是线与字之间的距离或者说空隙很大
如果设置比较小的line-height,比如line-height: .9,距离的确能缩小,但又产生另一个问题:阻止正常的文本换行。
解决方案二
使用background-image属性
background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 1.115em;
text-shadow: .05em 0 white, -0.05em 0 white;
效果非常棒。也可以实现不同的线条类型:比如虚线下划线
background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;
background-size: .2em 2px;
backgrond-position: 0 1em;
通过色标的百分比位置值来微调虚线的虚实比例,还可以通过background-size来改变虚线的疏密。
相关文章推荐
- 巧妙利用CSS自定义网页下划线样式
- css不使用text-decoration实现自定义下划线
- 用CSS自定义博客链接字体及链接下划线的样式
- 巧妙利用CSS自定义网页下划线样式
- 用CSS自定义博客链接字体及链接下划线的样式
- CSS自定义网页下划线样式
- CSS自定义下划线动画效果
- 浅谈CSS自定义下划线
- 导航链接--用CSS自定义博客链接字体及链接下划线的样
- 利用CSS,链接下划线也玩自定义
- 设置JavaFX-CSS改变TreeView节点图标
- 创建自定义的基于css的转场效果
- git修改和删除功能_动力节点Java学院整理
- Android读取Manifest文件下Application等节点下的metadata自定义数据
- 自定义博客CSS
- CSS 自定义列表样式
- FlowChart.NET使用教程:创建自定义节点类型(一)
- css实现下划线与文字不同颜色
- 用css把表单的input输入框变成下划线
- 用js+html+css实现自定义弹窗