zoukankan      html  css  js  c++  java
  • 实现文字下划线 ---模拟text-decoration

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

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

    body{
            margin: 0;
         }
    
            div {
                 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属性的颜色

    background-color:currentColor; css3 ie9+ 
    就是当前的背景颜色由color决定
    在iOS Safari浏览器下(iOS8)下,currentColor还是有一些bug的,例如伪元素hover时候,background:currentColor的背景色不会跟着变化

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

  • 相关阅读:
    编译安装zabbix3.2
    编译安装PHP的参数 --with-mysql --with-mysqli --with-apxs2默认路径
    MySql中指定符号分割并分行展示
    Linux中vim编辑器常用命令
    Ubuntu中安装配置 JDK与apache
    Ubuntu中python链接本地数据库
    oracle函数笔记(1)
    Oracle的五种约束
    斐波那契数列
    python计算圆面积
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/6094430.html
Copyright © 2011-2022 走看看