css径向渐变radial-gradient和css正则选择器
程序员文章站
2022-03-03 11:40:30
效果图：radial-gradient()函数创建了一个图片，其由原点辐射开的在俩个或者多个点颜色之前的渐变组成写法：background:radial-gradient(#ccc,#9198e5)background:radial-gradient(closest，#ccc,#9198e5，#ff3040)background:radial-gradient(circle at 100%,#ccc,#ccc 50%,#9198e5,75%,#ff3040 75%)
效果图：
radial-gradient()函数创建了一个图片，其由原点辐射开的在俩个或者多个点颜色之前的渐变组成
写法：
background:radial-gradient(#ccc,#9198e5)
background:radial-gradient(closest，#ccc,#9198e5，#ff3040)
background:radial-gradient(circle at 100%,#ccc,#ccc 50%,#9198e5,75%,#ff3040 75%)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
[attr^="val1"] {
float: left;
width: 200px;
height: 200px;
margin: 20px;
background: radial-gradient(red, #9198e5);
}
[attr^="val2"] {
float: left;
width: 200px;
height: 200px;
margin: 20px;
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
}
[attr^="val3"] {
float: left;
width: 200px;
height: 200px;
margin: 20px;
background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333333 75%);
}
[attr^="val4"] {
float: left;
width: 200px;
height: 200px;
margin: 20px;
background: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red);
}
</style>
<body>
<div attr="val1">
</div>
<div attr="val2">
</div>
<div attr="val3">
</div>
<div attr="val4">
</div>
</body>
</html>
本文地址：https://blog.csdn.net/m0_47480813/article/details/112799077
上一篇： 基础编程题（四）
推荐阅读
-
css3 线性渐变和径向渐变示例附图
-
css背景色渐变之线性渐变和径向渐变的具体用法
-
css3 线性渐变和径向渐变示例附图
-
详解css3径向渐变如何定义中心和大小形状（代码示例）
-
详解css3径向渐变如何定义中心和大小形状（代码示例）
-
【01】CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径 向渐变）_html/css_WEB-ITnose
-
【01】CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径 向渐变）_html/css_WEB-ITnose
-
CSS3 两种类型的渐变(lineat Gradients线性渐变和Radial Gradients径向渐变)
-
CSS3 径向渐变（radial-gradient）_html/css_WEB-ITnose
-
CSS3 径向渐变（radial-gradient）_html/css_WEB-ITnose