css 径向/放射性发散

Love The Way You Lie 2021-07-24 13:24 279阅读 0赞

径向/发散渐变
    	background:radial-gradient(圆心,形状，大小，颜色1，颜色2，...)；
    		
    		圆心
    			默认位置为最中心
    				at npx/%  npx/%  （默认为从左上角开始)，不能有，逗号
    				at top			从中心的最上面开始
    				at left bottom  右下角
    		大小
    			放在圆心位置前面，不能有，逗号
    			closest-side(最近边)
    			farthest-side(最远边)
    			closest-corner(最近角)
    			farthest-corner(最远角，默认值)
    				
    				background:radial-gradient(closest-side at 50% 50%,red,blue);
    		形状
    			放在圆心位置前面，不能有，逗号	
    				ellipse  椭圆，默认值
    				circle	 圆
    					
    				background:radial-gradient( circle closest-side at 50% 50%,red,blue);
    				background:radial-gradient( 100px 100px,red,blue); 设置镜像圆的高宽为100px; 改变高宽可以使其变成椭圆

**代码示例：**

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.div01{ 
    				height:200px;
    				width:300px;
    				background:radial-gradient( circle closest-side at 50% 50%,red,blue);
    			}
    		</style>
    	</head>
    	<body>
    		<div class="div01">
    			
    		</div>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关 css新特性：线性渐变详解(重复性线性渐变、径向渐变、重复性径向渐变的使用)

线性渐变线性渐变重复性线性渐变径向渐变重复性径向渐变的使用 -------------------- 线性渐变线性渐变是

￡神魔★判官ぃ/ 2024年03月30日 14:42/ 0 赞/ 59 阅读

相关 CSS 3种渐变效果（线性渐变，径向渐变，圆锥型渐变）

1 linear-gradient（线性渐变） 1.1按方向渐变语法： background: linear-gradient(direction, color

淩亂°似流年/ 2023年10月05日 11:05/ 0 赞/ 11 阅读

相关 CSS3-径向渐变

径向渐变就是从一个中心点开始向四周产生渐变的效果；CSS3 中提供了实现径向渐变的 `radial-gradent()` 函数；使用该函数时，至少需要两个终止色。语法：

女爷i/ 2023年07月02日 09:24/ 0 赞/ 21 阅读

相关径向扫描，网格底纹

径向扫描，网格底纹效果具体实现围绕中心点旋转遮罩生成底纹网格生成扫描条效果围绕中心点旋转

Bertha 。/ 2023年01月12日 01:54/ 0 赞/ 134 阅读

相关 HTML径向效果,HTML5版径向渐变梯度色彩

![5268f80b9b1e01f982625ef6fac83ca1.png][] HTML5版径向渐变梯度色彩有个读者问我如何用HTML5生成一个径向梯度色彩效果，而不

布满荆棘的人生/ 2022年10月06日 07:56/ 0 赞/ 202 阅读

相关 CSS线性渐变，径向渐变

线性渐变： background-image: linear-gradient(to bottom,red 0px,yellow 100px); ![watermark

曾经终败给现在/ 2022年09月03日 13:12/ 0 赞/ 247 阅读

相关 css3-颜色渐变线性径向

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

灰太狼/ 2022年07月14日 00:44/ 0 赞/ 256 阅读

相关径向基神经网络RBF

RBF网络原理 RBF网络，即径向基神经网络，也是前馈型网络的一种。它的设计思想和BP网络完全不一样。 Cover定理：将复杂的模式分类问题非线性的投射到高维空间将比

一时失言乱红尘/ 2022年05月27日 01:14/ 0 赞/ 430 阅读

相关常用放射性核素表

<table style="border-collapse:collapse;"> <tbody> <tr> <td colspan="6"

╰半夏微凉°/ 2021年12月03日 06:11/ 0 赞/ 313 阅读

相关 css 径向/放射性发散

径向/发散渐变 background:radial-gradient(圆心,形状，大小，颜色1，颜色2，...)；圆心

Love The Way You Lie/ 2021年07月24日 13:24/ 0 赞/ 280 阅读