渐变

线性渐变:
属性:linear-gradinet(开始位置 角度,起始颜色,终止颜色 )
开始位置:渐变开始的位置,属性值可以为百分比/长度/left、right、top、bottom(可组合使用)
角度:渐变终止方向的角度,当开始位置为数值或百分比时候可用
起始颜色......
终止颜色......
重复渐变将属性修改为:repeating-linear-gradinet()

径向渐变(放射渐变):属性:radial-gradinet()(形状 发散方向,起始颜色,终止颜色)

形状:ellipse(椭圆)/circle(圆形)
发散方向:属性值可以为left、right、top、bottom、center(可组合使用)
大小(半径):属性值可用像素或关键字表示closest-side:圆心到距离最近的边
farthest-side:圆心到距离最远的边
closest-corner:圆心到距离最近的角
farthest-corner:圆心到距离最远的角

起始颜色......
终止颜色......
重复的径向渐变:repeating-radial-gradinet()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS边框属性 元素的边框就是围绕元素内容和内边距的一条或多条线。 元素的边框属性: border 简写属性,用...
    Zd_silent阅读 1,028评论 0 1
  • 在用CSS实现等效中,经常会用到渐变,所以,本篇就研究一下渐变的特性; 在CSS中,渐变并不是作为CSS中的一个属...
    科研者阅读 722评论 0 3
  • 前言 重拾css后的文章,在观看了慕课网上的视频《重拾CSS的乐趣》中,看到了一些有意思的css效果。想起当初自己...
    destiny0904阅读 1,835评论 0 0
  • 1.角度和from to只能运行一个。并且可以相互代替。看api语法:<repeating-linear-grad...
    西安小哥阅读 1,293评论 0 1
  • 设计巧妙的剧情,藕断丝连的故事,温暖救赎的人生,很久很久以前的一场初恋,留给世界太多的感动能量,直到两位主角都已离...
    草上霜阅读 203评论 0 1