css 径向/放射性发散

最新推荐文章于 2024-05-14 11:13:25 发布

神奇大叔

最新推荐文章于 2024-05-14 11:13:25 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103125511

版权

css 专栏收录该内容

64 篇文章 2 订阅

订阅专栏

径向/发散渐变
			
1、默认情况下,渐变的中心在50% 50%标记处,渐变是椭圆形的,与其框的纵横比相匹配:
	 background: radial-gradient(red, blue);

2、设置渐变开始点:
	 background: radial-gradient(red 50px, yellow 50%, blue 80%);
	 	红色在圆形半径50px的地方处开始渐变,之前的区间不渐变为红色
	 	黄色在50%处的地方渐变,其他区间会和前后的元素产生渐变
	 	蓝色在80%处的地方渐变,之前的区间会和前面的元素产生渐变,之后不渐变

3、设置渐变圆心
	默认位置为最中心
	at npx/%  npx/% (默认为从左上角开始),不能有,逗号
	at top			从中心的最上面开始
	at center		从中心开始
	at left bottom  右下角
	
		background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);

4、设置渐变大小半径
	closest-side:半径为从圆心到最近边
	farthest-side:半径为从圆心到最远边
	closest-corner:半径为从圆心到最近角
	farthest-corner:半径为从圆心到最远角
	
	background-image:radial-gradient(farthest-side at 10% 30%,red,blue)
	
	当声明为椭圆形时,可通过数值来设置椭圆形长短半径
		background:radial-gradient(ellipse 80% 20% at center,#ff0,#000);
	
5、设置渐变形状
	ellipse  椭圆，默认值
	circle	 圆
	
	background:radial-gradient( circle closest-side at 50% 50%,red,blue);
	background:radial-gradient( 100px 100px,red,blue); 设置镜像圆的高宽为100px; 改变高宽可以使其变成椭圆

6、设置多个渐变
	 只要之前的渐变是有透明度的,后面的渐变在前面渐变的相同位置就能显示出来,否则不会显示
	  background:
      radial-gradient(circle at 50% 0,
        rgba(255,0,0,.5),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
        rgba(0,0,255,.5),
        rgba(0,0,255,0) 70.71%),
      radial-gradient(circle at 93.3% 75%,
        rgba(0,255,0,.5),
        rgba(0,255,0,0) 70.71%) beige;
  
7、重复渐变
	repeating-radial-gradient(...)	和普通渐变语法相同

在这里插入图片描述

代码示例：

<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>