css给文字加下划线

时间：2022-06-27 18:14:46

语法：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%)

css给文字加下划线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>

示例：

css给文字加下划线

<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> &lt ...

  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&gt ...

  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. iOS9请求https问题-记录

    iOS9 开始苹果将HTTP全改为HTTPS了,所以出现网络请求失败问题,解决办法: 1.改回HTTP: 在info.plist文件中添加一个Key:NSAppTransportSecurity(字典 ...

  2. ps裁剪圆角

    1.打开要编辑的图片 2.选择圆角矩形工具,并调整半径(半径越大,角越圆),本例半径为20像素 3.使用上述工具画出选区 4.按下ctrl+enter,可以看到选区边缘描上了虚线 5.菜单栏-图像-剪 ...

  3. WinForm中嵌入WebBrowser&comma;并且支持C&num;和JS方法的相互调用

    纯粹WinForm界面不够友好,实现数据复杂度高的处理有些力不从心,所以看了看api以后决定用html来做. 我的wlw的代码插件不是很好用,大家凑合看吧 类前说明引用和权限 1: [Permissi ...

  4. linux每日一练：Enable multithreading to use std&colon;&colon;thread&colon; Operation not permitted问题解决

    linux每日一练:Enable multithreading to use std::thread: Operation not permitted问题解决 在linux在需要使用c++11时会遇到 ...

  5. Struts&lpar;十一&rpar;：OGNL表达式（二）

    Map栈 :request,session,application的一个属性值或一个请求参数的值. 若想访问ContextMap里的某个对象的属性,可以使用以下几种之一: #object.proper ...

  6. MongoDB 监控

    在你已经安装部署并允许MongoDB服务后,你必须要了解MongoDB的运行情况,并查看MongoDB的性能.这样在大流量得情况下可以很好的应对并保证MongoDB正常运作. MongoDB中提供了m ...

  7. 前端学习-基础部分-css（一）

    开始今日份整理 1.CSS的导入方式 CSS的导入方式主要是有内联模式,行内模式,外部样式表 1.1 内联模式 内联模式:直接在<head>中直接写css,例如 p{ color:rgb( ...

  8. Maven问题：Failure to transfer org&period;apache&period;maven

    Maven报错:Failure to transfer org.apache.maven 在创建Maven项目时,经常会在pom.xml的第一行处报错,提示信息如下: Failure to trans ...

  9. python中闭包

    闭包是指内层函数引用了外层函数的变量(参数也算变量),然后返回内层函数的情况,称为闭包(Closure). 闭包的特点是返回的函数还引用了外层函数的局部变量,所以,要正确使用闭包,就要确保引用的局部变 ...

  10. HDUOJ---1754 Minimum Inversion Number （单点更新之求逆序数）

    Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java ...

相关文章