radial-gradient

语法：
radial-gradient(类型大小 at 圆心位置，颜色1 边界位置,颜色2 边界位置,颜色3 边界位置,...)
类型：可选，ellipse（椭圆）|circle 默认ellipse
大小：可选， extent-keyword|circle-size|ellipse-size
extent-keyword：closest-side|closest-corner|farthest-side|farthest-corner
closest-side：
指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：
指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：
指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner：
指定径向渐变的半径长度为从圆心到离圆心最远的角
circle-size: 只接受长度单位如px，em
ellipse-size: 水平大小垂直大小，可接受长度单位或百分比
圆心位置：水平位置垂直位置，都接收长度，百分比，left，top，center等关键词，也可混合使用，若只设定了一个位置，则水平位置为该位置，垂直位置默认为center
颜色：rgba，hsla，关键词皆可
边界位置：接受长度和百分比

举例：
radial-gradient(ellipse 200px 100px at left 100px top 50px,blue 30%,green 60%,yellow 80%);
表示以距上边界50px,下边界100px的点为圆心，作水平半径200px，垂直半径100px的椭圆，其中在圆心到椭圆边界的路径上，0%-30%为蓝色，30%-50%为由蓝到绿的渐变色，50%-80%为由绿到黄的渐变色，80%-100%为黄色

radial-gradient相关推荐

android 背景切换动画效果代码,关于Android shape gradient背景渐变
百度后,发现渐变色不仅可以根据xml来实现,也可以用java代码来实现,由于目前没有那么多时间,只记录xml实现的方法:以后在记录Java实现的代码. 通过Shape gradient标签来实现首先 ...
(Shadow,Gradient)
Shadow shadow(阴影)的目的是为了使UI更具有立体感,如图 shadow主要有三个影响因素 x off-set 决定阴影沿着x的偏移量 y off-set 决定阴影沿着y的偏移量 b ...
CSS3渐变——gradient
渐变是CSS3中的一个新加特性,可以让颜色之间平稳过渡,让页面样式更为炫酷书写渐变属性时,注意添加前缀(不同浏览器的兼容性不同) 线性渐变liner-gradient 沿着一根隐形的轴线,从起点到终 ...
Android图形shape的gradient渐变色背景
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
前言一直对渐变背景这块比较感兴趣,但是因为每天加班实在太忙了,任务也比较多.所以就只能下班的时间研究渐变背景这方面的知识,一来满足了自己的好奇心,二来可以更加了解这方面的知识.跟更多不断学习的小伙伴 ...
重构之美－浴火重生的火凤凰CSS3【前传：Gradient】
叮叮叮,铛铛铛,上课了上课了,同学们挨个坐好,爆老师要点名啦! 额,在上课之前先说一下,本套课程所有图例或示例包括以后涉及到的动画,我都将使用CSS3来设计,不采用一张图片,所以请使用Chrome浏览 ...
MBProgressHUD 使用详解
MBProgressHUD是一个显示HUD窗口的第三方类库,用于在执行一些后台任务时,在程序中显示一个表示进度的loading视图和两个可选的文本提示的HUD窗口.我想最多是应用在加载网络数据的时候. ...
unity 灯笼_如何创建将自己拼成文字的漂亮灯笼
unity 灯笼 In this tutorial, we will go through how to create a group of festival lanterns that arrang ...
html在线热点工具,Heatmap.js 强大的 HTML5 画布 WEB 网页在线热点图插件 - 资源分享...
Heatmap.js 可以用来生成基于用户自定义数据上的 Web 热点图,使用内嵌的 HTML5 Canvas 画布元素,heatmap.js 可以使用 Canvas 画出来一张漂亮的 heatmap ...
WPF Wonders: Transformations (and Robots!)
indows Presentation Framework (WPF) gets a lot of mileage out of being layered on top of DirectX, in ...

radial-gradient

radial-gradient

radial-gradient相关推荐

最新文章

热门文章