css之为文本添加线性渐变和外描边

 一、效果：

描边：描边+渐变：

二、描边：

api：text-stroke

问题：text-stroke的描边是居中描边，无法直接设置外描边

解决：在before中添加文本，设置字体描边，绝对定位在文本下方

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{background:blue}

        h2 {

            font-size: 31px;

            font-weight: 800;

            color: #70b4d9;

            position: relative;

            z-index: 1;

        }

        h2::before {

            content: attr(data-text);

            position: absolute;

            -webkit-text-stroke: 6px #fff;

            z-index: -1;

        }

    </style>

</head>

<body>

    <h2 data-text="数据采集">数据采集</h2>

</body>

</html>

三、添加渐变

api：

background-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#999999), to(#333333), color-stop(0.5,#336600));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

原理：字体渐变的原理是将背景图片剪切为字体，然后将字体颜色取消。

问题：字体渐变的实质是背景图片，所以无法在其下面再垫一层背景

解决：给文本套一层span，使渐变为span的背景，然后在父标签垫描边背景。

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{background:blue}

        h2 {

            font-size: 31px;

            font-weight: 800;

            color: #70b4d9;

            position: relative;

            z-index: 1;

        }

        h2>span{

            background-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#999999), to(#333333), color-stop(0.5,#336600));

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

        }

        h2::before {

            content: attr(data-text);

            position: absolute;

            -webkit-text-stroke: 6px #fff;

            z-index: -1;

        }

    </style>

</head>

<body>

    <h2 data-text="数据采集"><span>数据采集</span></h2>

</body>

</html>

　　

钻研不易，转载请注明出处、、、、、、

css之为文本添加线性渐变和外描边的更多相关文章

  1. 图形处理：给 Canvas 文本填充线性渐变

    作者:凹凸曼 - Barrior 在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多:就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y. ...

  2. 深入理解CSS线性渐变linear-gradient

    × 目录 [1]定义 [2]渐变线 [3]色标 [4]重复渐变 [5]多背景 [6]应用场景 [7]IE兼容 前面的话 在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性 ...

  3. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（3）线性渐变

    线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear ...

  4. css线性渐变--linear-gradient

    使用css直接写渐变,对于现在而言,应该属于比价简单的一件事了,在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法. ...

  5. CSS线性渐变

    /*CSS线性渐变*/ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff, ...

  6. 兼容IE与firefox、chrome的css 线性渐变（linear-gradient）

    现行渐变首先看下示例(1)垂直渐变 (2)垂直渐变 IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF ...

  7. css线性渐变兼容

    css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...

  8. 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课）

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

  9. 线性渐变css

    从上到下的线性渐变: #grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background ...

随机推荐

  1. tarjan强联通分量（模板）

    #include<cstdio> #include<cstring> #include<cstdlib> #include<iostream> #inc ...

  2. elasticsearch问题解决之分片副本UNASSIGNED

    在上一篇文章中,我记录了在windows下同一台机器上搭建es集群的步骤,第二天在向集群中创建索引的时候,出现了分片副本未分配的情况(UNASSIGNED). 虽然并不影响数据的插入和查询,但是有问题 ...

  3. LG3804 【模板】后缀自动机

    题意 给定一个只包含小写字母的字符串\(S\), 请你求出 \(S\) 的所有出现次数不为 \(1\) 的子串的出现次数乘上该子串长度的最大值. 对于\(100\%\) 的数据,\(|S| \leq ...

  4. 转-java编译时error: illegal character '\ufeff' 的解决办法-https://blog.csdn.net/t518vs20s/article/details/80833061

    原文链接:https://blog.csdn.net/shixing_11/article/details/6976900 最近开发人员通过SVN提交了xxx.java文件,因发布时该包有问题需要回退 ...

  5. .gitignore忽略git版本库中的文件(夹)

    # 忽略*.o和*.a文件 *.[oa] # 忽略*.b和*.B文件,my.b除外 *.[bB] !my.b # 忽略dbg文件和dbg目录 dbg # 只忽略dbg目录,不忽略dbg文件 dbg/ ...

  6. ASP.NET MVC中如何实现页面跳转

    1,最简单的方式:超链接 以下分别是连接到HomeController控制器下的SharpL动作方法,以及百度首页.代码如下: <a href="Home\SharpL"&g ...

  7. loadrunner 函数解释

    一.lr_save_string 使用介绍1.该函数主要是将程序中的常量或变量保存为lr中的参数.格式: //将常量保存为参数lr_save_string("777"," ...

  8. 深入理解ASP.NET MVC（目录）

    学ASP.NET MVC2有一段时间了,也针对性的做了个练习.感觉这个框架还是不错的,所以决定要深入系统的学习一下.看到这样一本书: 作者博客:http://blog.stevensanderson. ...

  9. Oracle VM VirtualBox 虚拟机 常用快捷键

    右Ctrl+C :放大或缩小 右Ctrl+F :全屏 右Ctrl+Delete :登录 知道上面的其他就都知道了

  10. python中的with

    看例 """ 需求:不用数据库连接池,实现数据库链接操作 """ class SQLHelper(object): def open(sel ...