语法：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. win10 内置软件经常不用，还占空间？如何轻松卸载

    Step1:首先,在电脑桌面上点击左下角的开始菜单,在依次选择打开所有应用—Windows PowerShell,在Windows PowerShell上单击右键,选择以管理员身份运行: Step2: ...

  2. [UE4]单机游戏改网络游戏，不完全清单

    把Actor的复制打开 中腰数据的复制打开,且只在服务器修改(比如角色属性血量) 需要同步的Actor,不在客户端Spawn 客户端的操作,先报告到服务器,服务器再广播到所有客户端 某些逻辑只在服务器 ...

  3. [UE4]定义和使用黑板、使用/赋值黑板变量

    黑板,其实就是相当于字典表,一个key对应一个value,key不能重复

  4. golang 反射应用（二）

    golang反射应用(二) package test import ( "reflect" "testing" ) //定义适配器 func TestRefle ...

  5. solr使用cursorMark做深度分页

    深度分页 深度分页是指给搜索结果指定一个很大的起始位移. 普通分页在给定一个大的起始位移时效率十分低下,例如start=1000000,rows=10的查询,搜索引擎需要找到前1000010条记录然后 ...

  6. [ORACLE]java.sql.SQLRecoverableException: IO Error: Connection rese

    随机数引起的阻塞问题 程序通过 java -jar -Djava.security.egd=file:/dev/./urandom xxx 的方式执行, http://hongjiang.info/j ...

  7. Linux服务器安装Nginx

    Nginx 安装 一.安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel 二.首先 ...

  8. JVM总结-java基本类型

    为什么要引进基本类型? Java 引进了八个基本类型,来支持数值计算.Java 这么做的原因主要是工程上的考虑,因为使用基本类型能够在执行效率以及内存使用两方面提升软件性能. Java 虚拟机的 bo ...

  9. AJAX发送 PUT和DELETE请求参数传递注意点，了解一下

    ajax发送put 和 delete 请求时,需要传递参数,如果参数在url地址栏上,则可以正常使用, 如果在 data:中需要传递参数,(浏览器会使用表单提交的方式进行提交) 则需要注意此时应作如下 ...

  10. LeetCode 2. add two numbers && 单链表

    add two numbers 看题一脸懵逼,看中文都很懵逼,链表怎么实现的,点了debug才看到一些代码 改一下,使本地可以跑起来 # Definition for singly-linked li ...