随笔 - 475  文章 - 0  评论 - 15  阅读 - 71万

实现文字下划线 ---模拟text-decoration

css 的text-decoration可以实现文字下方的下划线,但是距离文字比较近,不是很好看,我们可以使用border-bottom来模拟这个效果

(inline元素虽然不可以设置margin-top和margin-bottom,但是可以设置padding值和border)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body{
        margin: 0;
     }
 
        div {
            width: 500px;
            margin: 50px auto;
        }
 
        span {
            padding-bottom:2px;
            color: red;
            border-bottom:1px solid;
        }
<div>
    <span>下划线</span>
</div>

  设置border时,建议不要设置border的颜色,这样border默认就是文字的颜色,特别是在a标签中,hover时文字颜色改变,就可以实现下划线与文字颜色保持一致而不需要设置border的颜色

text-decoration目前浏览器支持不较好的属性:

text-decoration-line:none underline  overline line-through

text-decoration-style:solid  double  dotted  dashed  wavy  inherit

text-decoration-color

  支持多值:

text-decoration: underline overline;

支持缩写:
text-decoration: underline wavy red;

  border,text-shadow边框色默认就是color属性的颜色

currentColor
background:currentColor

 

参考来自:http://www.zhangxinxu.com/wordpress/2016/11/css-text-decoration-underline-skip-override/

posted on   半夏微澜ぺ  阅读(524)  评论(0编辑  收藏  举报
< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示