css之background:-webkit-gradient()背景渐变属性

webkit内核的safari、 Chrome的Linear Gradients (线性渐变)的几点说明及演示:

webkit内核的safari、    Chrome的Linear Gradients (线性渐变) 基本语法:background-image:-webkit-gradient(type,x1 y1, x2 y2,

    from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] );

-webkit-gradient是background的一个属性值;

webkit内核的Linear Gradients (线性渐变) 第一组参数type(类型)为 linear;

第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是。x1,x2,y1,y2的取值范围为0%-100%,当x1,x2,y1,y2取值为极值的时候,x1和x2可以取值left(或0%)或right(或100%),,y1和y2可以取值top(或0%)或bottom(或100%);

当x1等于x2,y1不等于y2,实现垂直渐变,调整y1,y2的值可以调整渐变半径大小;

当y1等于y2,x1不等于x2,实现水平渐变,调整x1,x2的值可以调整渐变半径大小;

当y1不等于y2,x1不等于x2,实现角度渐变,当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变;

当x1等于x2,y1等于y2,实现没有渐变,取from色,即“ from(颜色值) ”;

实现垂直渐变和水平渐变渐变时,x1和x2可以最简单的取值是left(或0%)或right(或100%),y1和y2可以最简单的取值是top(或0%)或bottom(或100%);

from(开始颜色值),to(结束颜色值)是两个渐变颜色值;

[color-stop(偏移量<小数>,停靠颜色值),...]:可以使用多个color-stop,如果渐变只有2个颜色,那么可以不使用该参数;偏移量必须为小数,如果偏移量>=1,那么该color-stop相当于无效;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 来源: http://www.douban.com/group/topic/14820131/ 调整变量格式: f...
    MC1229阅读 11,853评论 0 5
  • (转自http://www.douban.com/group/topic/14820131/,转自人大论坛) 调整...
    f382b3d9bdb3阅读 13,693评论 0 8
  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    前端进阶之旅阅读 12,966评论 22 225
  • “哎哟喂……”唉,我的老毛病,扁桃体炎又犯了。这不,一大早,喉咙里又痛又痒,像有一条小毛虫在爬来爬去,脑袋里...
    欢乐洋阅读 1,877评论 1 1
  • 在我的大脑里对人工智能的认知来源于三件事,第一件就是阿尔法狗在2016年3月以总比分4比1战胜李世石。 第二件事是...
    穆建园阅读 1,468评论 2 1

友情链接更多精彩内容