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. hdu1233 还是畅通工程 最小生成树

    给出修建边的边权,求连通所有点的最小花费 最小生成树裸题 #include<stdio.h> #include<string.h> #include<algorithm& ...

  2. 关于Hibernate性能优化之 FetchType=Lazy时查询数据

    当表A和表B一对多的关系 对于A和B的实体类,设置FetchType=EAGER时,取A表数据,对应B表的数据都会跟着一起加载,优点不用进行二次查询.缺点是严重影响数据查询的访问时间. 解决办法Fet ...

  3. windows下，java环境变量的设置，设置点击startup.bat启动tomcat

    1.首先.安装好java jdk以后环境变量设置: CLASSPATH:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar JAVA_HOME:C:\ ...

  4. 初探Net框架下的XML编程技术

    一．前言: XML是微软.Net战略的一个重要组成部分,而且它可谓是XML Web服务的基石,所以掌握.Net框架下的XML技术自然显得非常重要了.本文将指导大家如何运用C#语言完成.Net框架下的X ...

  5. 深入理解ASP.NET MVC（4）

    系列目录 DataTokens和Areas机制 到目前为止Route对象只剩下DataTokens属性没有涉及,事实上这个Areas机制的核心. DataTokens实际上也是一个RouteValue ...

  6. opencv中的滤波

    以前的时候,为了过滤图像中的一些噪点,学过一些简单的滤波,比如中值滤波,均值滤波,也是自己实现的. 在opencv中有现成的函数可以调用,实现滤波的操作. 函数的原型如下: CVAPI(void) c ...

  7. R(7): data.table

    这个包让你可以更快地完成数据集的数据处理工作.放弃选取行或列子集的传统方法,用这个包进行数据处理.用最少的代码,你可以做最多的事.相比使用data.frame,data.table可以帮助你减少运算时 ...

  8. 织梦开启PHP 标签

    第一步: dedecms出现DedeCMS Error:Tag disabled:php原因解决 --------------------------------------------------- ...

  9. implicit和 explicit关键字

    implicit 关键字用于声明隐式的用户定义类型转换运算符. 如果可以确保转换过程不会造成数据丢失,则可使用该关键字在用户定义类型和其他类型之间进行隐式转换. class Digit { publi ...

  10. Android启动过程中背景图片显示

    转自:http://blog.csdn.net/zhangzhikaixinya/article/details/17001321 大部分Android App启动过程中,都会设置一个背景图片,直到A ...