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. 牛客练习赛14A(唯一分解定理)

    https://www.nowcoder.com/acm/contest/82/A 首先这道题是求1~n的最大约数个数的,首先想到使用唯一分解定理,约数个数=(1+e1)*(1+e2)..(1+en) ...

  2. 【JVM】jvm的jps命令

    jps -- Java Virtual Machine Process Status Tool 可以列出本机所有java进程的pid jps [ options ] [ hostid ] 选项 -q ...

  3. java环境变量 Path 与CLASSPATH

    1.Windows操作系统根据Path环境变量来查找命令,Linux操作系统则根据PATH环境变量来查找命令 因为Windows操作系统不区分大小写,设置Path和PATH并没有区别,而Linux系统 ...

  4. Linux内核配置

    1.autoconf.h文件 老版本的Linux内核中,执行make menuconfig后,编译系统会把所有的配置信息保存到源码顶层目录下的.config文件中,然后将.config中的内容转换为C ...

  5. vulcanjs 开源工具方便快速开发react graphql meteor 应用

    vulcan 开源工具方便快速开发react graphql meteor 应用 操作环境mac os 安装 meteor 安装(此安装有点慢,可以通过正确上网解决) curl https://ins ...

  6. hadoop 安装、命令

    hadoop安装步骤: 安装java 安装hadoop 下载地址:http://apache.claz.org/hadoop/common/ (说明:该网址current文件夹下,是最新版) hado ...

  7. mysql 存储过程知识点

    一.创建存储过程 create procedure sp_name() begin ......... end 二.调用存储过程 1.基本语法:call sp_name(): 注意:存储过程名称后面必 ...

  8. bzoj1853幸运数字

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1853 容斥原理的应用. 发现十位的话只有2047个只含6或8的数,故可以存.它们的倍数个数只要 ...

  9. JS 检测浏览器中是否安装了特定的插件

    1.检测非IE浏览器 可以使用plugins数组来达到这个目的,例: //检测插件(在IE中无效) function hasPlugin(name){ name = name.toLowerCase( ...

  10. java jni 调用c++ opencv代码成功范例

    java上建立接口定义 package com.dtk; public class Rec { public native String RecImage(String src); public st ...