css不使用text-decoration实现自定义下划线
来源:互联网 发布:网络交友的好处 编辑:程序博客网 时间:2024/04/30 12:31
利用background-image及其相关属性模拟下划线
背景可以完美地跟随换行的文本,而且借助CSS 背景与边框(第三版)中与背景相关的新属性,我们已经拥有了细粒度控制背景的能力。我们甚至不需要用到额外的HTTP 请求来加载背景图片,因为可以通过CSS 渐变来凭空生成所需的图像:
background: linear-gradient(gray, gray) no-repeat;background-size: 100% 1px;background-position: 0 1.15em;
图5-24
你可以在图5-24 中看到它的效果多么优雅和柔和。不过,我们仍然有一点改进的空间。
请注意下划线会穿过某些字母(比如p 和y)的降部。如果下划线在遇到字母时会自动断开避让,那效果看起来岂不是更好?假如背景是一片实色,就可以设置两层与背景色相同的text-shadow 来模拟这种效果(参见图5-25):
使用渐变来实现下划线的高明之处在于,这些线条极为灵活。举例来说,如果要生成一条虚线下划线(参见图5-26),可以这样做:
然后,就可以通过色标的百分比位置值来微调虚线的虚实比例,还可以通过background-size 来改变虚线的疏密。
阅读全文
0 0
- css不使用text-decoration实现自定义下划线
- css text-decoration下划线
- div css 下划线text-decoration
- CSS 解决 a标签去掉下划线 text-decoration: none不好使 的问题
- 关于text-decoration去掉下划线
- CSS中text-decoration属性
- CSS:text-decoration参数说明
- CSS text-index| transform| decoration| text-overflow
- web--p 缩进 text-indent text-decoration 下划线
- 解决文字和text-decoration:underline下划线重叠问题
- 解决文字和text-decoration:underline下划线重叠问题
- text-decoration:none; 为什么不生效
- CSS text-decoration: blink 只在火狐中闪烁
- CSS text-decoration Line Height属性 学习笔记
- text-decoration <del> <s> 实现横线从文字中间穿过的CSS效果属性和html标签
- 浅谈CSS自定义下划线
- CSS——文本样式(text-indent,text-transform,text-decoration,text-justify)
- text-decoration 入门Demo
- 如何用命令将本地项目上传到git
- 11.04/05课堂内容整理
- jsp 九大内置对象详解以及示例
- 文件上传和下载
- java接收requestbody的json再调用url并且传参
- css不使用text-decoration实现自定义下划线
- 百度、谷歌地图集成相关准备:SHA1指纹
- 简单dp
- JVM虚拟机简单介绍
- bat命令后台运行
- Retrofit翻译计划
- 并发编程<一>线程5大状态切换时机分析及sleep,join,wait,notify,notifyAll,yield剖析
- 2017.11.7总结
- 图像检索