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. [LOJ6029~6052]雅礼集训 2017 选做

    Link 代码可以在loj上看我的提交记录. Day 1 [LOJ6029]市场 对于一次除法操作,若区间内所有数的减少量均相同则可视作区间减法,否则暴力递归下去.显然一个线段树节点只会被暴力递归进去 ...

  2. 表单添加缩略图及截图js代码

    此为表单提交是上传截图的代码,待优化: // 添加小程序图片 function addAvatar(obj){ var file = obj.files[0]; limit($('.avatar_bo ...

  3. golang 自定义importpath

    golang 的包导入和其他语言有好多不一样的地方,以下是一个自定义的导入 golang 自定义导入说明 一个官方的说明 比较简单,就不翻译了,主要是说我们可以通过添加meta 数据告诉包如何进行加载 ...

  4. Where is Silverlight now?

    Some time ago, I wrote an article about the comparison between HTML5 and Silverlight. That article w ...

  5. 分部视图在ASP.NET MVC中的应用

    概述: 在ASP.NET Web Form的开发经验中,对于User Control使用比较频繁,可以减少重复的代码,利于页面模块化,这个概念也被引入了ASP.NET MVC.即“分部视图”. 1.创 ...

  6. System帐户!我使用你登陆

    大家知道,SYSTEM是至高无上的超级管理员帐户.默认情况下,我们无法直接在登录对话框上以SYSTEM帐户的身份登录到Windows桌面环境.实际上SYSTEM帐户早就已经“盘踞”在系统中了.想想也是 ...

  7. yii 获取当前模块名、控制器名 、动作名

    yii1 1. 获取控制器名 在控制器中获取控制器名: $name = $this->getId(); 在视图中获取控制器名: $name = Yii::app()->controller ...

  8. linux上通过lighttpd上跑一个C语言的CGI小页面以及所遇到的坑

    Common Gateway Interface如雷贯耳,遗憾的是一直以来都没玩过CGI,今天尝试一把.Tomcat可以是玩CGI的,但得改下配置.为了方便,直接使用一款更轻量级的web服务器ligh ...

  9. JZ2440 裸机驱动 第10章 系统时钟和定时器

    本章目标      了解S3C2410/S3C2440的时钟体系结构     掌握通过设置MPLL改变系统时钟的方法     掌握在不同的频率下设置存储控制器的方法     掌握PWM定时器的用法   ...

  10. 【python】实例-python实现两个字符串中最大的公共子串

    由于python中的for循环不像C++这么灵活,因此该用枚举法实现该算法: C="abcdefhe" D="cdefghe" m=0 n=len(C) E=[ ...