语法：linear-gradient(direction, color-stop 1, color-stop 2,……）

简单用法：background-image: linear-gradient(red, transparent);

增加角度，linear-gradient(45deg, red, transparent)

加个position：linear-gradient(45deg, red, transparent 45%)

加个colorlinear-gradient(45deg, red, transparent 45%,red)

linear-gradient(45deg, transparent 45%, red 55%, transparent 60%)

linear-gradient(135deg, transparent 45%, red 55%, transparent 60%)

把这两个线结合达到波浪线效果

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .down{

             position: relative;

        }

    .down:after{

            content: '';

            position: absolute;

            bottom: -2px;

            left: 5%;

            width: 90%;

            height: 2px;

            background: -webkit-linear-gradient(315deg, transparent, transparent 45%,  red 55%, transparent 55%, transparent 100%)

                        ,-webkit-linear-gradient(45deg, transparent, transparent 45%,  red 55%, transparent 55%, transparent 100%);

            background-size: 4px 4px;

            background-repeat: repeat-x;

        }

  </style>

</head>

<body>

  <span class="down">燃情岁月</span>

</body>

</html>

示例：

<span style="border-bottom: 1px solid #F00;">红色下划线</span>

红色下划线

css给文字加下划线的更多相关文章

  1. iOS 给UILabel文字加下划线

    摘自:http://blog.sina.com.cn/s/blog_6cd380c10101b6hn.html //带下划线的“注” NSMutableAttributedString可变的属性字符串 ...

  2. css-动画，a标签下，文字加下划线，而且动画是由中间向两边扩展开

    效果: html: <div class="warp"> <a class="welcome">期待您的参与</a> < ...

  3. 有关css编写文字动态下划线

    <div class="main_text">哈哈这就是我的小视频</div> 上面为html代码 接下来进行css的编写 .main_text{ posi ...

  4. css标题文字和下划线重叠

    <view class="text"> <text class="textCon">标题</text> <text c ...

  5. html网页中如何给文字加入下划线

    网页中一些重要的文字或者特殊性高的文字,例如:链接,标注等我们需要加上下划线,那么这里我们就需要使用到<U>标签了,写法如下 字体下划线: <u>这里添加内容</u> ...

  6. TextView 为部分文字添加下划线，并实现单击事件

    在开发应用的过程中经常会遇到显示一些不同的字体风格的信息,如关键词高亮显示的等.对于类似的情况,一般我们会想着使用多个TextView去实现,对于每个TextView设置不同的字体风格来满足需求.   ...

  7. iOS初学，关于变量加下划线问题

    为什么做ios开发,变量前要加下划线才有用? 看到这个哥们的解释后,终于明白了,转帖到此. 链接在此:http://www.cocoachina.com/bbs/read.php?tid=234290 ...

  8. Markdown - 如何给文本加下划线

    解决方法 Markdown可以和HTML的语法兼容,可以通过HTML的标签来实现效果: 写法 效果 <u>下划线</u> 下划线 这里解释下,u指的是underline下划线. ...

  9. iOS - UIButton设置文字标题下划线以及下划线颜色

    创建button设置可以折行显示 - (void)viewDidLoad { [super viewDidLoad]; UIButton * button = [[UIButton alloc] in ...

随机推荐

  1. 无法定位序数****于动态链接库LIBEAY32.dll上

    问题出现原因: GNS3打开出现问题 尝试的方法如下: 创建脚本: @echo 开始注册 copy libeay32.dll %windir%\system32 regsvr32 %windir%\s ...

  2. Delphi根据方法名调用方法

    type   TForm1 = class(TForm) public published     procedure DoJsCall(str:string);                   ...

  3. 我推荐阅读的微信公众号-IT类

    微信,正深刻影响着我们的生活,每个使用微信的人,从微信这个窗口去了解这个世界. 微信公众号,微信生态圈是核心功能之一,每天都有大量的文章创作.传播.转发出来,海量的信息扑面而来,微信阅读成为微信使用者 ...

  4. (转)Java调用Weservice

    原文地址:http://www.cnblogs.com/jiangxu1989/p/6491483.html https://www.cnblogs.com/neughj/p/5145630.html ...

  5. HDFS的操作SHELL和API

    HDFS的shell操作和JavaAPI的使用: WEB WEB端口50090查看SecondaryNameNode信息.可以查看Hadoop的版本,NameNode的IP,Checkpoint等信息 ...

  6. Java 5- Java 修饰符

    Java 修饰符 Java语言提供了很多修饰符,主要分为以下两类: 访问修饰符 非访问修饰符 修饰符用来定义类.方法或者变量,通常放在语句的最前端.我们通过下面的例子来说明: public class ...

  7. solr如何让全词匹配结果在最前面

    在全文搜索中默认排序是按照匹配度权值score排序的,权值越大位置越靠前,那为什么有很多时候全词匹配反而不在最前面那,其实很简单因为全词匹配权值也就是100,但是还有很多权值大于100的排在了前面. ...

  8. [TJOI2015]弦论(后缀自动机)

    /* 一道在树上乱搞的题目 建立出parent树来, 然后就能搞出每个节点往后能扩展出几个串, 至于位置不同算同一个的话就强制让right集合大小为1即可 然后在树上类比权值线段树找第k大26分统计一 ...

  9. Spring中BeanFactory与ApplicationContext的区别

    BeanFactory:Bean工厂接口,是访问Spring Bean容器的根接口,基本Bean视图客户端.从其名称上即可看出其功能,即实现Spring Bean容器的读取. ApplicationC ...

  10. 性能测试day02_预习知识

    在进入第二天的学习之前,我想我们需要提前先了解一下基础的知识,所以这一篇主要讲解的就是预习课程,关于协议和抓包的讲解(原理和工具). 可以说基于服务器的性能一般都是基于协议的,所以我们就需要懂协议,以 ...