样式之文字下划线

  • 第一 text-decoration: underline;

    • 缺点是不好修改颜色 不要修改下划线的位置，优点就是一行代码解决
    • 可以使用line-height: 20px; 也能调整位置;
  • 第二种更全面 使用span标签而且不会变形 border-bottom: 2px solid #409eff; padding-bottom: 5px;
  • 第三种可以使用box-shadow模拟
    • box-shadow: h-shadow(必需 水平阴影位置,可负值) v-shadow(必需 水平阴影位置,可负值) blur(可选 模糊距离) spread(可选 阴影大小) color(可选 阴影颜色) inset(可选 从外层的阴影（开始时）改变阴影内侧阴影)
    • box-shadow: 0 -1px #409eff inset;

  • 第四种可以用标签的形式 使用u标签如： 下划线

CSS样式下划线的更多相关文章

  1. outline轮廓线在不同CSS样式下的表现

    outline轮廓线在不同CSS样式下的表现 CSS 去除浏览器默认 轮廓外框 在默认情况下,点击 a 标签,input,或者添加click事件的时候,浏览器留下一个轮廓外框(chrome之下为蓝色) ...

  2. 纯css导航下划线跟随效果【转载】

    css: ul { display: flex; position: absolute; width: 800px; top: 50%; left: 50%; transform: translate ...

  3. android:为TextView加入样式——下划线，颜色，设置链接样式及前背景色

    实现下划线及颜色设置: public class AtActivity extends Activity { LinearLayout ll;     /** Called when the acti ...

  4. CSS 文本下划线 text-decoration

      定义和用法 text-decoration 属性规定添加到文本的修饰. 可能的值 值 描述 none 默认.定义标准的文本. underline 定义文本下的一条线. overline 定义文本上 ...

  5. CSS样式下border的几种线型

    在用border的时候经常会忘记它有多少种线型以及各种线型的写法:每次都得从头开始,或是用到Google.百度之类的,有空整理了一下 (1)none (没有边框,无论边框宽度设为多大) (2)dott ...

  6. CSS超链接样式，去除下划线等

    控制超链接样式 链接的四种状态: a:link - 普通的.未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 ...

  7. 纯css实现Magicline Navigation(下划线动画导航菜单)

    看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...

  8. 不可思议的纯CSS导航栏下划线跟随效果

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  9. tab 切换下划线跟随实现

    HTML 结构如下: <ul> <li class="active">不可思议的CSS</li> <li>导航栏</li> ...

随机推荐

  1. iOS9新特性之常见关键字

    /* nullable:1.怎么使用(语法) 2.什么时候使用(作用) nullable作用:可能为空 nullable 语法1 @property (nonatomic, strong, nulla ...

  2. pageX的兼容性处理2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. SpringBoot源码解读系列——开篇

    什么是SpringBoot? 定义可以参考官网:SpringBoot官网,其定义通俗易懂,这里就不赘述. 官网也给出了一个通用的SpringBoot工程样例,其中包含了这么几个元素: 1.pom依赖 ...

  4. FastJSON解析Json字符串（反序列化为List、Map）

    在日常开发与数据库打交道的时候,常有以Json格式的字符串存储到数据库的情况,当在Java程序中获取到对应的Json格式的String字符串后,如何才能转换为我们想要的数据格式(比如转换成Java中的 ...

  5. 【BZOJ2337】XOR和路径(高斯消元)

    题目链接 大意 给出\(N\)个点,\(M\)条边的一张图,其中每条边都有一个非负整数边权. 一个人从1号点出发,在与该点相连的边中等概率的选择一条游走,直到走到\(N\)号点. 问:将这条路径上的边 ...

  6. Scala概述及环境配置

    一.概述 1.1 为什么要学Scala? Spark是新一代的内存级大数据的计算框架,是大数据学习的重要内容.随着Spark的兴起,同时也带动了Scala的学习,因为Spark就是Scala编写的.为 ...

  7. Spark算子 - aggregateByKey

    释义 aggregateByKey逻辑类似 aggregate,但 aggregateByKey针对的是PairRDD,即键值对 RDD,所以返回结果也是 PairRDD,结果形式为:(各个Key, ...

  8. LNMP 架构 与 部署 uwsgi 服务

    内容概要 nginx 配置文件中 location 匹配符号 LNMP 架构 uwsgi 服务部署 内容详细 一.location 使用 Nginx Location 可以控制访问网站的路径,但一个 ...

  9. java的不正确使用方法以及什么情况不能使用java

    一.Python3.6新特性 什么情况下不能运用 Java 泛型   1. 前语 Java 1.5 引入了泛型来保证类型安全,避免在运行时发作类型转换反常,让类型参数化,提高了代码的可读性和重用率.可 ...

  10. MyBatisPlus分页不起作用?因为少了配置

    /** @author QiuQiu&LL @create 2021-09-05 0:25 @Description: / @EnableTransactionManagement @Conf ...