样式之文字下划线

  • 第一 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. Google hacker

    转载请注明来源:https://www.cnblogs.com/hookjc/ Google Hacking其实并算不上什么新东西,在早几年我在一些国外站点上就看见过相关的介绍,但是由于当时并没有重视 ...

  2. 使用CAShapeLayer做出圆形的进度条 —— #DF!

    CircleView.h的内容如下: #import <UIKit/UIKit.h> @interface CircleView : UIView @property (nonatomic ...

  3. MySQL索引类型一览 让MySQL高效运行起来(转)

    转自:http://www.php100.com/html/webkaifa/database/Mysql/2010/0409/4279.html 索引是快速搜索的关键.MySQL索引的建立对于MyS ...

  4. VLAN大战三层交换机 以及无敌的Hybrid

    VLAN与三层交换机 1.VLAN的概念与优势 2.VLAN的种类 3.静态VLAN的配置 4.Trunk介绍and配置 5.三层交换机原理 6.hybrid 1.当某个网络设备出现 故障后,就会不停 ...

  5. Maven获取resources的文件路径、读取resources的文件

    路径问题一切要看编译后的文件路径 比如,源文件路径是: 而编译后的文件路径为: 也就是说,resources文件夹下的文件在编译后,都是为根目录,这种情况下,比如我要读取resources 文件夹下的 ...

  6. Solution -「NOI 2016」「洛谷 P1587」循环之美

    \(\mathcal{Description}\)   Link.   给定 \(n,m,k\),求 \(x\in [1,n]\cap\mathbb N,y\in [1,m]\cap \mathbb ...

  7. JMM之Java线程间通讯——等待通知机制及其经典范式

    在并发编程中,实际处理涉及两个关键问题:线程之间如何通信及线程之间如何同步(这里的线程是指并发执行的活动实体). 通信是指线程之间以何种机制来交换信息.在共享内存的并发模型里,线程之间共享程序的公共状 ...

  8. 手把手教你把 Git 子模块更新到主项目

    本文以 skywalking-rocketbot-ui子模块合并到 skywalking 为例,手把手教你如何把 Git 子模块更新到主项目中去. 首先,把fork的skywalking项目克隆到本地 ...

  9. 图解AI数学基础 | 线性代数与矩阵论

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/83 本文地址:http://www.showmeai.tech/article-det ...

  10. [数分笔记]Dedekind切割定理的证明

    1.定理内容 Dedekind切割定理:设是实数集的一个切割,则或者有最大数,或者有最小数. 2.证明过程 设是中所有有理数所构成的集合,是中所有有理数所构成的集合 从而构成一个有理数集的切割 有三种 ...