HTML边框圆角丶渐变颜色

最新推荐文章于 2024-05-28 19:06:22 发布

发哥万羊户

最新推荐文章于 2024-05-28 19:06:22 发布

阅读量4k

点赞数 2

文章标签： CSS border-radius transition 颜色渐变前端开发

本文链接：https://blog.csdn.net/m0_65687397/article/details/128031304

版权

1：边框圆角：border-radius

边框圆角共有四个值，四个值依次控制左上圆角,右上圆角，右下圆角，左下圆角。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.max{
				margin: 20px auto;
				width: 400px;
				height: 400px;
				border-radius: 15px 20px 25px 30px;
				background-color: rgb(30,250,151);
			}
		</style>
	</head>
	<body>
		<div class="max">
			
		</div>
	</body>
</html>

实现效果

2：颜色的渐变：需要用到的代码：transition: ？,?;

第一个问号填的值控制需要变化的是什么，后一个问号控制的是变化所需要的时间

例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				margin: 0 auto;
				width: 300px;
				height: 300px;
				background-color: #0000FF;
				transition: all 2s;
			}

			div:hover {
				height: 600px;
				/* background-image: linear-gradient(green,black,yellow); */
				background-color: gold;
			}
		</style>
	</head>
	<body>
		<div class="">

		</div>
	</body>
</html>

视频上传有误，就不进行具体的演示。