渐变

一.

1.渐变语法

线性渐变

background-image:linear-gradient( to top,green 20%,red 80%);

background-image:linear-gradient( 180deg,green 20%,red 80%);

镜像渐变

background-image:radial-gradient( red 20%,green 60%,blue 20%   );默认从中点开始

background-image:radial-gradient( 200px at right top ,red 20%,green 60%,blue 20%   );

repeating(重复)

/*重复镜像渐变指定半径的长度及位置*/

background-image:repeating-radial-gradient( red 15%,green 20%,blue 30%   );

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

相关阅读更多精彩内容

  • CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平...
    ilkswiss阅读 3,440评论 0 1
  • 倒影 -webkit-box-reflect: left 10px -webkit-linear-gradient...
    小飞侠zzr阅读 1,751评论 0 1
  • 渐变 渐变分为线性渐变以及径向渐变,下面来一一介绍 线性渐变 注意事项 默认写法,不加前缀,要在方向前面加to,顺...
    likeli阅读 3,382评论 0 1
  • 2017年3月27日 林玉珍“育心丽谦时间管理100天挑战营”第71天 【早起】5:00 【学习】1.《易经》系辞...
    林玉珍阅读 3,161评论 0 3
  • 我好像犯了点错误,做什么都是错的。以后不能对自己亲近的人发火。为什么我要对jy有怨气呢?诶。本来自己就是独来独往的...
    愚人日记2017阅读 1,373评论 0 0

友情链接更多精彩内容