CSS3写渐变色

最新推荐文章于 2024-06-20 11:21:40 发布

d慢慢

最新推荐文章于 2024-06-20 11:21:40 发布

阅读量501

点赞数 3

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_72243342/article/details/127664139

版权

今天带大家用css3写几个简单的渐变矩形，效果如下图：

渐变矩形

下面是style板块

<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				margin: 10px;
				float: left;
			}
			.c1{
				/* 从上到下 线性渐变 */
				background-image: linear-gradient(#ff00ad,#f09876);
			}
			.c2{
				/* 从左到右 线性渐变 */
				background-image: linear-gradient(to right,#ff00ad,#f09876);
			}
			.c3{
				/* 对角 线性渐变 */
				background-image: linear-gradient(to bottom right,#ff00ad,#f09876);
			}
			.c4{
				/* 指定角度 线性渐变 */
				background-image: linear-gradient(190deg,#bd0aad,#f09876);
			}
			.c5{
				/* 多种颜色 线性渐变 */
				background-image: linear-gradient(#00ffff,#ff00ad,#f09876);
			}
			.c6{
				/* 透明度 线性渐变 */
				background-image: linear-gradient(to bottom right,rgba(255,255,0,0.2),rgba(255,0,0,0.3));
			}
			.c7{
				/* 重复渐变 线性渐变 */
				background-image: repeating-linear-gradient(yellow,#ff00ad 10%,#f09876 30%);
			}
			.c8{
				/* 径向 线性渐变 */
				background-image: radial-gradient(yellow,#ff00ad,#f09876);
			}
			
			.c9{
				/* 径向 线性渐变 */
				background-image: repeating-radial-gradient(yellow,#ff00ad 5%,#f09876 20%);
			}
		</style>

然后是html部分

		<div class="c1"></div>
		<div class="c2"></div>
		<div class="c3"></div>
		<div class="c4"></div>
		<div class="c5"></div>
		<div class="c6"></div>
		<div class="c7"></div>
		<div class="c8"></div>
		<div class="c9"></div>