css之为文本添加线性渐变和外描边
时间:2019-03-15
本文章向大家介绍css之为文本添加线性渐变和外描边,主要包括css之为文本添加线性渐变和外描边使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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>
钻研不易,转载请注明出处、、、、、、
- flex4/flash builder中动态加载Module并与之交互的正确方式
- Google发布会看图的人工智能,让它来评评你的照片拍得好不好
- Git日常操作命令梳理
- Git忽略规则.gitignore梳理
- 深入浅出事件流处理NEsper(二)
- 微信推出“微信使用小助手”,中老年人也能轻松玩转微信
- Flex4中使用WCF
- storm如何分配任务和负载均衡?
- Flex4中的ModuleLoader,Alert以及TitleWindow
- Flex4中使用HDividedBox,VDividedBox
- 编程技术哪家强,百度指数帮你忙
- 2017,人们视算法为洪水猛兽;算法说:我不想背锅
- 深入浅出事件流处理NEsper(三)
- 用Flex模拟智能手机表单输入的自动放大功能
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
- Python Switch Case三种实现方法代码实例
- PHP正则表达式笔记与实例详解
- php实现微信分享朋友链接功能
- python交互模式基础知识点学习
- 浅析Python 抽象工厂模式的优缺点
- 基于PyTorch的permute和reshape/view的区别介绍
- Laravel配置全局公共函数的方法步骤
- PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
- python–shutil移动文件到另一个路径的操作
- PHP正则表达式处理函数(PCRE 函数)实例小结
- yii2的restful api路由实例详解
- PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
- 用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
- Python操作MySQL数据库的示例代码