样式之文字下划线

  • 第一 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. 读取数据库Blob类型的文本数据

    开发一个查询功能时,遇到了一个ORM的问题:数据库字段是 Blob 类型,里面实际存储的是文本数据,Java 后端代码中用字符串 String 类型去接收这个字段的数据时,报错,提示没有对应的sett ...

  2. 分布式系统及CAP理论

    一.集中式系统 在学习分布式之前,先了解一下与之相对应的集中式系统是什么样的. 集中式系统用一句话概括就是:一个主机带多个终端.终端没有数据处理能力,仅负责数据的录入和输出.而运算.存储等全部在主机上 ...

  3. Keepalived配置与使用(1)

    介绍 Keepalived是一个基于VRRP协议来实现的WEB服务高可用方案,可以利用其来避免单点故障.一个WEB服务至少会有2台服务器运行Keepalived,一台为主服务器(MASTER),一台为 ...

  4. Nginx中的Location和Rewrite

    Nginx中的Location和Rewrite 目录 Nginx中的Location和Rewrite 一.location 1. location的分类 2. location常用的匹配规则 3. l ...

  5. Linux之shell变量

    一.变量名的规范 定义形如:class_name='xiaohemiao' 使用形如:echo $class_name 1.变量名后面的等号左右不能有空格 2.命名只能使用英文字母,数字和下划线,首个 ...

  6. MLlib学习——基本数据类型

    数据类型--基于RDD的API 本地矢量 标记点 本地矩阵 分布式矩阵 RowMatrix(行矩阵) IndexedRowMatrix(索引行矩阵) CoordinateMatrix(坐标矩阵) Bl ...

  7. tarjan——有向图、无向图

    强连通块只存在于有向无环图DAG中 实际上low[i]的理解是:一个强连通块在dfs搜索树中子树的根节点 //把一个点当成根提溜出来,抖搂抖搂成一棵树 void dfs(int u) { //记录df ...

  8. Solution -「洛谷 P4372」Out of Sorts P

    \(\mathcal{Description}\)   OurOJ & 洛谷 P4372(几乎一致)   设计一个排序算法,设现在对 \(\{a_n\}\) 中 \([l,r]\) 内的元素排 ...

  9. C#操作读写INI配置文件

    一个完整的INI文件格式由节(section).键(key).值(value)组成.示例如:[section]key1=value1key2=value2; 备注:value的值不要太长,理论上最多不 ...

  10. STM32 HAL 库实现乒乓缓存加空闲中断的串口 DMA 收发机制，轻松跑上 2M 波特率

    前言 直接储存器访问(Direct Memory Access,DMA),允许一些设备独立地访问数据,而不需要经过 CPU 介入处理.因此在访问大量数据时,使用 DMA 可以节约可观的 CPU 处理时 ...