css 径向/放射性发散

Love The Way You Lie 2021-07-24 13:24 248阅读 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 条评论，248人围观）

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

相关阅读

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

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

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

相关 R语言绘制发散型条形图

R语言绘制发散型条形图在数据可视化中，条形图是一种常用的图表类型。它可以清晰地展示各个类别的数据之间的差异。而发散型条形图则是一种特殊的条形图，它能够更加直观地展示正负值间

Love The Way You Lie/ 2023年10月14日 17:57/ 0 赞/ 9 阅读

相关径向扫描，网格底纹

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

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

相关 html径向渐变怎么写彩虹,CSS3 彩虹渐变文本

CSS 语言： CSSSCSS 确定 @import url(http://fonts.googleapis.com/css?family=Raleway:400);

落日映苍穹つ/ 2022年10月08日 00:39/ 0 赞/ 79 阅读

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

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

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

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

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

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

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

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

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

相关径向基神经网络RBF

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

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

相关常用放射性核素表

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

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

相关 css 径向/放射性发散

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

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