![css如何实现渐变效果?css背景色渐变与文字渐变效果的实现(code)](https://700zi.400zi.cn/uploadfile/img/14/604/457adf76800f4a0b43f080fdf22f9821.jpg)
web前端|css教程
linear-gradient,radial-gradient,文字渐变,css
web前端-css教程
在前端网页开发的时候,往往会用到一些渐变色的效果,这样可以使得前端页面更加美观。那么这些渐变效果是如何用css代码实现出来的?本章就给大家带来css如何实现渐变效果?css背景色渐变与文字渐变效果的实现(代码实例),介绍css 渐变样式和如何实现css渐变。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
微信商品网站源码,ubuntu 创建系统用户,tomcat远程调试程序,爬虫框架 博客,php快速定位网络问题,wap seolzw
A、css 背景色渐变 样式
域名卖源码,ubuntu下载系统内核,tomcat 一直重启吗,爬虫获取淘宝视频,使用php开发文字类游戏,seo内容规划lzw
1. css 线性背景渐变样式
微生活 源码,vscode中怎么加入谷歌,ubuntu 需要多大,tomcat单点登录源码,node爬虫软件,php cgi找不到,低成本seo推广开户,php 企业门户网站,梦的模板下载lzw
语法:
background-image: linear-gradient( || , , , )
第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color
stops)。至少需要两种颜色(起点和终点),你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色,或一种颜色加一个百分比。
代码(考虑浏览器兼容性):
css背景渐变--线性渐变.demo{width:500 ;height: 300;margin: 50px auto;}.demo *{width: 200px;height: 200px;margin: 20px;text-align: center;line-height: 200px;color: #fff;font-size: 16px;float: left;}.demo1{/* 底色 */background-color: #fd0d0d;/* chrome 2+, safari 4+; multiple color stops */background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #fd0d0d), color-stop(0.66, #d89e3c), color-stop(0.83, #97bb51));/* chrome 10+, safari 5.1+ */background-image: -webkit-linear-gradient(#fd0d0d, #d89e3c, #97bb51);/* firefox; multiple color stops */background-image: -moz-linear-gradient(top,#fd0d0d, #d89e3c, #97bb51);/* ie 6+ */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fd0d0d, endColorstr=#d89e3c);/* ie8 + */-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fd0d0d, endColorstr=#d89e3c)";/* ie10 */background-image: -ms-linear-gradient(#fd0d0d, #d89e3c, #97bb51);/* opera 11.1 */background-image: -o-linear-gradient(#fd0d0d, #d89e3c, #97bb51);/* 标准写法 */background-image: linear-gradient(#fd0d0d, #d89e3c, #97bb51);}.demo2{/* 底色 */background-color:#d41a1a;/* chrome 2+, safari 4+; multiple color stops */background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #d41a1a), color-stop(0.66, #d9e60c), color-stop(0.83, #5c7c99));/* chrome 10+, safari 5.1+ */background-image:-webkit-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);/* firefox; multiple color stops */background-image:-moz-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);/* ie10 */background-image: -ms-linear-gradient(45deg, #d41a1a 0%, #d9e60c 100%);/* opera 11.1 */background-image: -o-linear-gradient(45deg, #d41a1a, #d9e60c);/* 标准写法 */background-image: linear-gradient(45deg, #d41a1a, #d9e60c);}
基本线性渐变--自上而下
基本线性渐变--45度角
效果图:
可以看出两个线性渐变的区别就在于background-image: linear-gradient();里的三个颜色值的第一个颜色值(#fd0d0d)变成了角度值:45deg。
2. css 径向背景渐变样式
css径向颜色渐变(Radial Gradients)跟线性渐变(linear
gradients)不一样,它不是沿着一个方向渐变,而是以一个点为中心,向四周辐射渐变,360度的。目前除了IE外的所有浏览器都支持css径向颜色渐变(Radial
Gradients),但它们也都有各自不同的语法
语法:
background-image: radial-gradient([ || ],[ || ],,,)
代码实例(考虑浏览器兼容性):
css背景渐变--径向渐变.demo{width:500px ;height:200px;margin: 50px auto;}.demo *{width:200px ;height:200px;margin: 50px 15px;float: left;}.demo1{background-image: -moz-radial-gradient(#ecff05, red);background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#ecff05), to(red)); /* old */background-image: -webkit-radial-gradient(#ecff05, red); /* new syntax */background-image: radial-gradient(#ecff05, red);}.demo2{background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);background-image: -webkit-radial-gradient(45px 45px, circle cover, #ecff05, red);background-image: radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);}
效果图:
B、css 字体文字渐变 样式
代码实例(考虑浏览器兼容性):
css字体文字渐变.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; }
css字体文字渐变,css字体文字渐变
效果图:
核心代码:
background-image:定义用到的渐变颜色范围;
-webkit-background-clip: text—-以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉;
-webkit-text-fill-color: transparent—检索或设置对象中的文字填充颜色。
注:
由于目前text-fill-color属性貌似就webkit核心的浏览器支持,所以两个demo页面只能在Chrome浏览器或是Safari浏览器下才能看到渐变效果。Firefox浏览器下纯色,IE下就更不用说了。