background:radial-gradient径向渐变

gekylin 发布于2019-08-29 15:34 / 2776人阅读

摘要：用长度值指定径向渐变圆心的纵坐标值。确定圆的类型指定圆形的径向渐变指定椭圆形的径向渐变。用百分比指定椭圆径向渐变的横向或纵向半径长度。

background: radial-gradient(shape size at position, start-color, ..., last-color);
= radial-gradient([ [ || ] [ at ]? , | at , ]?[ , ]+)
= [ ① | ① | left | center① | right ]? [ ② | ② | top | center② | bottom ]?
= circle | ellipse
= | [ || ]
= closest-side | closest-corner | farthest-side | farthest-corner
=
= [ | ]{2}
= |
= [ | ]?

确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center

①： 用百分比指定径向渐变圆心的横坐标值。可以为负值。
①： 用长度值指定径向渐变圆心的横坐标值。可以为负值。
    left： 设置左边为径向渐变圆心的横坐标值。
    center①： 设置中间为径向渐变圆心的横坐标值。
    right： 设置右边为径向渐变圆心的横坐标值。
②： 用百分比指定径向渐变圆心的纵坐标值。可以为负值。
②： 用长度值指定径向渐变圆心的纵坐标值。可以为负值。
    top： 设置顶部为径向渐变圆心的纵坐标值。
    center②： 设置中间为径向渐变圆心的纵坐标值。
    bottom： 设置底部为径向渐变圆心的纵坐标值。

确定圆的类型

circle： 指定圆形的径向渐变
ellipse： 指定椭圆形的径向渐变。

circle | ellipse 都接受该值作为 size

closest-side： 指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner： 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side： 指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner： 指定径向渐变的半径长度为从圆心到离圆心最远的角

circle 接受该值作为 size

： 用长度值指定正圆径向渐变的半径长度。不允许负值。

ellipse 接受该值作为 size

： 用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
： 用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。

用于指定渐变的起止颜色：

： 指定颜色。
： 用长度值指定起止色位置。不允许负值
： 用百分比指定起止色位置。不允许负值

GPU服务器私有云径向基函数图片渐变完美渐变背景渐变

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113410.html

CSS3径向渐变radial-gradient实现波浪边框和内倒角

摘要：表示圆形渐变，说的简单点就是画一个圆。表示容器最右边，表示容器最上边，换言之就是右上角。实现波浪边框上代码，增加一个样式即可此处没有字样，表示原点在容器中心位置，，表示半径范围内是颜色，半径到范围内是颜色，半径大于是颜色。前言大佬给了一张优惠券图片(如下图)，我一看，这波浪型的边框和内倒角用css写不出来吧，遂向大佬说明并要ui切图，大佬回答：css3可以实现。好吧，大佬都说可以实...

王岩威 2019-08-30 15:55 评论0 收藏0
浅探css3渐变

摘要：基本用法想要知道线性渐变有什么用，当然要先学习它的属性和用法。下面我们先一起学习一下线性渐变的属性。函数的第一个参数是角度或者方向，第二个参数是截止颜色的值，要想产生渐变的效果，当然至少要两个或者两个以上的颜色值。 css3的渐变属性已经在各种网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要...

lieeps 2019-08-29 17:17 评论0 收藏0
用纯css来实现一个优惠券

摘要：关于径向渐变的具体使用可以参考张鑫旭的文章径向渐变语法及辅助理解案例则那么怎样实现我们要的效果呢我们先看看径向渐变的语法径向渐变由它的中心定义。查看原文可以有更好的排版效果哦前言我们在平时的网页中，经常会见到这样的优惠券或者其他的券（特征就是会有反方向的圆角）。 showImg(https://segmentfault.com/img/remote/146000001570560...

awkj 2019-08-30 15:54 评论0 收藏0
前端每日实战：35# 视频演示如何把 CSS 径向渐变用得出神入化，只用一个 DOM 元素就能画出国

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbfmJt?w=400&h=304); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comeh...

ssshooter 2019-08-29 15:33 评论0 收藏0