Css3 文字渐变整理(一)
2024-09-06 13:33:00
一、文本颜色渐变
<gradient> :可以应用在所有接受图像的属性上,允许使用简单的语法实现颜色渐变,以便UA在渲染页面自动生成图像。
语法:<gradient> = linear-gradient() | repeating-linear-gradient() | radial-gradient() | repeating-radial-gradient()
注意:必需在一个有尺寸的盒子里生成。如果盒子没有尺寸,渐变效果则无法呈现。
可以作用在能接受图像的任意属性上:
background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216))); list-style-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
文字颜色渐变比较麻烦,并且兼容性差强人意:
background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(4, 94, 170)), to(rgb(1, 152, 216)));
-webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
-webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色: */
兼容性:
text-fill-color,IE果然又不兼容。移动端UC浏览器也不兼容。
-webkit-background-clip: text; 非正式属性,目前(2017-07-07)仅仅FF、Chrome、Safari支持,并且必须带前缀。
二、代码示例
<view class="demo">css字体文字渐变,css字体文字渐变</view>
.demo {
width: 500px;
height: 200px;
margin: 50px auto;
font-size: 20px;
background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(166, 4, 249)), to(rgb(251, 223, 11)));
/*必需加前缀 -webkit- 才支持这个text值 */
-webkit-background-clip: text;
/*text-fill-color会覆盖color所定义的字体颜色: */
-webkit-text-fill-color: transparent;
}
显示结果:
更多:
最新文章
- 《Single Image Haze Removal Using Dark Channel Prior》一文中图像去雾算法的原理、实现、效果(速度可实时)
- hibernate 数据处理
- Java Se: Logging 框架说明
- 三、第一个Struts2应用案例(编码步骤)
- MapReduce编程系列 — 6:多表关联
- 【C#】详解使用Enumerable.Distinct方法去重
- 使用Linux的命令行工具做简单的文本分析
- python 文件移动(shutil)
- ubuntu phone/touch的源码从哪里下载?
- EntityFramework Core 自动绑定模型映射
- Spark编译及spark开发环境搭建
- 博弈论进阶之SG函数
- VS code常用快捷方式—转载
- cf1107e uva10559区间dp升维
- 大数据技术 - 通俗理解MapReduce之WordCount(二)
- 分布式 +rides
- Java开发人员必须掌握的Linux命令(二)
- 辅助模块:udp_sweep
- super()、this属性与static静态方法的执行逻辑
- [UE4]动态改变相机OrthWidh、关掉阴影