CSS3之径向渐变(radial-gradient)

分针网每日分享:CSS3之径向渐变(radial-gradient)

这篇文章主要对径向渐变进行详解,也是分为带内核和不带内核两种情形。
 
1 带内核的径向渐变,这里以moz为例,其它内核语法一样。
 
(带有内核)径向渐变
语法:
-moz-radial-gradient(原点位置,形状+半径,颜色 位置,颜色 位置);
示例:
-moz-radial-gradient(center,circle,white 10%,black 50%);
参数详解:
原点位置 :可以用px/left bottom 表示
仅用一个px表示 ,其表示x方向位置,y方向位置默认为正中间;如果两个px,分别表示x和y方向位置.
形状:circle(圆) ,ellipse(椭圆)
直径:原点到远角,远边,近边,近角的距离,其可以用来确定渐变直径。
颜色 : 渐变颜色
位置:渐变颜色的终点位置
注意:半径省略默认直径为原点到远角的距离,位置省略默认为中心点。形状也可省略。
 
带内核径向渐变代码
 
background: -moz-radial-gradient(left,circle,red 10%,yellow 50%,green 50%);
 
/* background: -moz-radial-gradient(50px,ellipse,red 10%,yellow 50%,green 51%);*/
 
/* background: -moz-radial-gradient(center,closest-corner circle,red 10%,yellow 50%,green 50%); */
 
/* background: -moz-radial-gradient(circle,red 10%,yellow 50%,green 50%); */
 
/* background: -moz-radial-gradient(circle closest-side,red 10%,yellow 50%,green 50%);*/
 
效果图如下:
 
 
 
结论:
当原点位置省略,默认为中心点;
当半径省略,渐变直径默认为原点到最远角的距离,图四直径为225。
 
2 不带内核的径向渐变
 
(不带内核)径向渐变:
radial -gradient(形状+半径 at 位置,颜色 渐变位置,颜色 渐变位置);
示例:
background : radial-gradient(circle,red 10%,yellow 50%,green 65%);
参数解析
形状取值:circle ,ellipse/px
一个px表示x和y方向的直径 ,两个px分别表示x和y的直径
半径: 可以为远角,近边等/px
形状是circle,只能给一个px,表示直径。
形状是ellipse,必须给两个px,表示x和y方向直径
位置取值:可以为px/left
注意:半径省略默认直径为原点到远角的距离,位置省略默认为中心点。形状也可省略。
 
代码如下:
 
.b{
 
/* background: radial-gradient(100px 200px at 50px 100px,red 10%,yellow 30%,green 65%); */
 
/* background: radial-gradient(circle at 50px 100px,red 10%,yellow 30%,green 65%); */
 
/* background: radial-gradient(ellipse 50px 100px,red 10%,yellow 50%,green 65%); */
 
/* background: radial-gradient(30px 100px at center,red 10%,yellow 50%,green 65%); */
 
/* background: radial-gradient(circle at left,red 10%,yellow 50%,green 65%); */
 
/* background: radial-gradient(ellipse closest-side at 140px,red 10%,yellow 50%,green 65%);*/
}
 
对比图效果:
 
 
 
结论:
如果没有确定位置,则位置位于center位置;
如果没有确定大小,直径为原点到最远角的距离(farthest-corner)。
 
本文转自:http://www.f-z.cn/id/286
 

转载于:https://www.cnblogs.com/fenzhen/p/7216233.html

### 使用 `radial-gradient` 创建径向渐变效果 在 CSS 中,`radial-gradient` 函数用于定义一个径向渐变作为元素的背景图像。该函数允许创建从中心向外扩散的颜色过渡效果。 #### 基本语法结构 径向渐变的基本语法如下: ```css background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...); ``` - **shape**: 定义形状,默认为椭圆形 (`ellipse`);可以设置为圆形 (`circle`)- **size**: 控制渐变区域大小,支持关键字如 `closest-side`, `farthest-side` 或者具体尺寸值。 - **position**: 渐变起点位置,默认为中心点(`center`),可以通过坐标调整。 - **color-stops**: 颜色停止点列表,至少两个颜色来构成完整的渐变序列[^4]。 #### 示例说明 为了更好地理解如何应用这些参数,这里给出几个具体的例子: ##### 单一简单径向渐变 ```css .radial-simple { width: 200px; height: 200px; background: radial-gradient(circle, red, yellow); } ``` 这段代码设置了宽度和高度均为200像素的一个正方形盒子,并为其指定了由红色到黄色变化的圆形径向渐变背景[^3]。 ##### 复杂多层径向渐变 当希望在一个区域内展示更复杂的视觉效果时,可以在同一个元素上堆叠多个径向渐变。例如: ```css .radial-complex { width: 200px; height: 200px; background: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red 49px, transparent 50px), radial-gradient(30px circle, red, red 29px, transparent 30px); } ``` 此样式规则展示了通过叠加不同参数配置下的两个径向渐变实现了更加丰富的图案设计[^1]。 #### 自定义形状与方向 除了默认选项外,还可以自定义渐变的具体形态及其起始方位。比如想要创建一个位于左上方的小型椭圆渐变,则应这样写: ```css .custom-radial { width: 200px; height: 200px; background: radial-gradient(at top left, blue, green); } ``` 上述实例中,“at top left”明确了渐变是从容器的左上角开始计算的位置偏移量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值