样式之文字下划线

  • 第一 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. 解决github.com无法访问

    解决 绕过DNS解析,直接使用本地DNS记录进行直接跳转. DNS查询 在浏览器中打开DNS查询网站:http://tool.chinaz.com/dns?type=1&host=github ...

  2. JavaBean基本概念

    JavaBean 是特殊的 Java 类,使用 Java 语言书写,并且遵守 JavaBean API 规范. JavaBean 与其它 Java 类相比而言独一无二的特征: 提供一个默认的无参构造函 ...

  3. Android利用zxing生成二维码

    感谢大佬:https://blog.csdn.net/mountain_hua/article/details/80646089 **gayhub上的zxing可用于生成二维码,识别二维码 gayhu ...

  4. docker基础——1.原理解读

    1. 相关内核知识 docker本质上是宿主机上的进程. 通过namespace实现资源隔离,通过cgroups实现资源限制,通过写时复制机制copy-on-write实现高效文件操作. 依赖kern ...

  5. 自定义滚动条样式-兼容IE

    滚动条样式设置 html部分: 1 <div id="scroll" style="width: 500px; height: 300px; border: 2px ...

  6. 30天自制操作系统day2汇编语言

    <30天自制操作系统>一书中第1天和第二天中有关汇编语言的程序的理解 ; hello-os ; TAB=4 ORG 0x7c00 ; 指明程序的装载地址 ; 以下的记述用于标准FAT12格 ...

  7. Servlet版本冲突导致页面404

    入门servlet前先准备好了Tomcat环境以及用Idea打了一个Servlet war包想看看效果,结果发现页面跳转一直报404错误,检查了跳转url,项目结构等情况后,问题依旧没有解决.最后偶然 ...

  8. 《PHP程序员面试笔试宝典》——如何准备电话面试？

    本文摘自<PHP程序员面试笔试宝典>. PHP面试技巧分享,PHP面试题,PHP宝典尽在"琉忆编程库". 用人单位在收到简历之后,有时候由于求职者众多,而且很多求职者的 ...

  9. 常用模块（Day25-Day28）

    模块分为三种: 1.内置模块:python安装时自带的. 2.扩展模块:别人写的,需要安装之后可以直接使用,如django,tornado等. 3.自定义模块:自己写的模块. 序列化模块 序列指字符串 ...

  10. 【数据共享】基于Landsat提取的全球河网（河宽）GDWL数据库

    GRWL数据库,全称Global River Widths from Landsat Database,是由Allen, George H & Pavelsky. Tamlin M等人基于La ...