样式之文字下划线

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

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

  2. js表达式和语句

    表达式 一个表达式可以产生一个值,有可能是运算.函数调用.有可能是字面量.表达式可以放在任何需要值的地方. 语句 语句可以理解为一个行为,循环语句和判断语句就是典型的语句.一个程序有很多个语句组成,一 ...

  3. 基于Docker部署4.2 版本的zabbix监控平台

    准备工作 两台VMware 虚拟机 一台充当zabbix server(安装docker)ip:192.168.73.133 一台充当zabbix agent(安装docker)ip:192.168. ...

  4. 用Java模拟实现对系统文件以目录的拷贝功能

    要用Java对单个文件拷贝的话,其实思路很简单,循环读取被拷贝文件,放入byte数组,然后写入目标文件.当然我们也可以借助现有的类去完成,如InputStream中的transferTo()方法就可以 ...

  5. 第2章 selenium开发环境的搭建

    前端技术: html:网页的基础,一种标记语言,显示数据: JS:前端脚本语言,解释型语言,在页面中添加交互行为 xml:扩展标记语言,用来传输和存储数据 css:层叠样式表,用来表现HTML或XML ...

  6. python篇第3天【编码规范】

    第二天加班去了! 语法约定: 多行语句 Python语句中一般以新行作为为语句的结束符. 但是我们可以使用斜杠( \)将一行的语句分为多行显示,如下所示: total = item_one + \ i ...

  7. 《PHP程序员面试笔试宝典》——如何准备集体面试？

    本文摘自<PHP程序员面试笔试宝典>. PHP面试技巧分享,PHP面试题,PHP宝典尽在"琉忆编程库". 集体面试也被称为群面.无领导小组面试.由于计算机发展至今,软件 ...

  8. 微信小程序常见两种登陆注册方式（一）

    普通登录注册以及用户授权登陆 普通登陆注册 概述 此功能的实现简单的借助了微信小程序的云开发,具体在哪里使用,我会标出来.对于用户名.账号.密码都做了简单的校验.主要练手功能的实现,样式只做了简单的编 ...

  9. 扫盲贴：2021 CSS 最冷门特性都是些啥？

    最近几年 CSS 界的大事之一是每年年底的 <State Of CSS>,也就是 CSS 现状调查,去年年底发布了<State Of CSS 2021>.其中关于特性这一章,会 ...

  10. Spark学习记录

    SpringStrongGuo Hadoop与Spark Hadoop主要解决,海量数据的存储和海量数据的分析计算. Spark主要解决海量数据的分析计算. Spark运行模式 1)Local:运行在 ...