CSS实现文字颜色渐变
三行代码即可实现:
background: linear-gradient(to bottom, #ffff, #f8fdff, #acf5ff, #67eeff, #24d8ff);-webkit-background-clip: text;color: transparent;
一 先设置背景颜色渐变
background 渐变属性可选值:
1 linear-gradient 为线性渐变
2 radial-gradient 为径向渐变
3 repeating-linear-gradient 重复线性渐变
4 repeating-radial-gradient 重复径向渐变
基本语法
线性渐变 :background:linear-gradient (渐变角度,颜色值1,颜色值2,… …颜色值n);
渐变角度是指水平线和渐变线之间的夹角,可以是以deg为单位的角度值或“to”加“left”“right”“top”和“bottom”等关键词。
颜色值:用于设置渐变颜色,“颜色值1”为起始颜色,“颜色值n”为结束颜色。
径向渐变:
background:radial-gradient(渐变形状圆心位置,颜色值1,颜色值2,… …颜色值n);
重复线性渐变:
background:repeating-linear-gradient(渐变角度,颜色值1,颜色值2,… …颜色值n);
重复径向渐变:
background:repeating-radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2,… …颜色值n);
二 设置背景作用域
-webkit-background-clip: text; 设置值 为text,表示作用在文字上
其他 语法 background-clip: border-box|padding-box|content-box;
border-box | 默认值。背景绘制在边框方框内(剪切成边框方框)。 |
padding-box | 背景绘制在衬距方框内(剪切成衬距方框)。 |
content-box | 背景绘制在内容方框内(剪切成内容方框)。 |
三 设置文字透明
color: transparent;
CSS实现文字颜色渐变相关推荐
- css Backgroud-clip (文字颜色渐变)
首先来瞄一下background-clip,这个属性是干嘛的? 顾名思义,背景裁剪... 按照我自己的理解就是背景的显示区域 此处粘上MDN的示例链接(嫌麻烦的,后面我也贴上截图)https:// ...
- CSS文字颜色渐变 - 案例篇
(含效果图.代码)css3 文字颜色渐变 - 案例篇 效果图: demo 代码如下: <doctype HTML!> <html> <head><title& ...
- 在html中怎么写背景色渐变,CSS 实现背景色渐变和文字颜色渐变(示例代码)
1. 背景色渐变 A . linear-gradient:用线性渐变创建图像. 语法: = linear-gradient([ [ | to ] ,]? [, ]+) 下述值用来表示渐变的方向,可 ...
- text-shadow和文字颜色渐变冲突问题
前端有时候会接到文字颜色渐变,同时有文字阴影的需求,如下图 一般会想到如下实现方法 // 实现文字颜色渐变 background-image: linear-gradient(360deg, #f61 ...
- Android自定义控件之RecyclerView打造万能ViewPager TabLayout(仿今日头条Tab滑动、Tab多布局、indicator蠕动、自定义indicator、文字颜色渐变)
文章目录 GitHub:https://github.com/AnJiaoDe/TabLayoutNiubility 该轮子特异功能如下: 使用方法 注意:该轮子适用于androidx中的ViewPa ...
- CSS实现内容颜色渐变的动画效果
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 CSS实现内容颜色渐变的动画效果 主要用到css的动画 一.HTML代码 二.CSS代码 主要用到css的动画 这是css动画的文档, ...
- 纯css实现背景颜色渐变动画
纯css实现背景颜色渐变动画,代码及效果图如下. body {width: 100wh;height: 100vh;color: #fff;background: linear-gradient(-4 ...
- css设置背景颜色渐变
对角线渐变: background: linear-gradient(to top right, #f6f5f0, #fefefd); 如果有多个颜色渐变,颜色的参数可以有多个: background ...
- html5做文字颜色渐变代码,神奇!js+CSS+DIV实现文字颜色渐变效果_javascript技巧
本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下 下面是 CSS 部分代码: body{ font:12px/1.5 Microsoft Yahei;}h3{ ...
最新文章
- 自组织映射网络(SOM)如何解决TSP问题
- WPF:Animation动画--AnimationTiming动画时机
- 编译安装LNMP Centos 6.5 x64(6.6 x64) + Nginx1.6.0 + PHP5.5.13 + Mysql5.6.19
- android8 Notification
- php手机接口购物车怎么实现,php购物车的实现原理
- easyui-window 关闭事件,只要关闭窗口就会触发
- java 生成器 设计模式_Java中的生成器设计模式
- Hadoop中RPC机制
- 守护线程 java 1615478655
- php安装redis扩展报错,CentOS 67下php5+安装redis扩展组件
- php redis 用户会话,使用Redis保存用户会话Session详解
- 使用Netty编写一个简单的群聊系统
- 互联网人必看的中台理论,阿里腾讯架构师用大白话讲出来了
- 「三分钟系列01」3分钟看懂快速排序
- Jquery中$与$.fn的区别
- ping端口的方法 - win下
- 转:SDHC卡驱动及初始化
- iPhone6分辨率与适配
- 为什么vsdebug没有生成obj文件_VS中bin和obj文件引发的问题
- Fabric - chaincode开发模式