CSS学习Day10之制作圆角和阴影

最新推荐文章于 2022-12-07 19:37:15 发布

Ishaq Li

最新推荐文章于 2022-12-07 19:37:15 发布

阅读量117

点赞数

分类专栏： CSS学习文章标签： css

本文链接：https://blog.csdn.net/m0_50847715/article/details/111686205

版权

CSS学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

制作圆角、圆、圆环以及半圆

制作圆角

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>边框属性</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			/*border-radius: 3px 10px 30px;圆角 分别为：左上 右上、左下 右下*/
			/*border-top-left-radius: 10px 20px;分别为：水平半径 垂直半径*/
	</style>
</head>
<body>
	<div class="box">
	</div>
</body>
</html>

制作圆

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>边框属性</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			/*制作圆*/
			border-radius: 100px;/*或50%*/
		}
	</style>
</head>
<body>
	<div class="box">
	</div>
</body>
</html>

制作圆环

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>边框属性</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			/*制作圆*/
			border-radius: 100px;/*或50%*/
			/*制作圆环*/
			border: 3px solid green;
		}
	</style>
</head>
<body>
	<div class="box">
	</div>
</body>
</html>

制作半圆

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>边框属性</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 100px;
			background-color: red;
			/*制作半圆*/
			border-radius: 100px 100px 0 0;
		}
	</style>
</head>
<body>
	<div class="box">
	</div>
</body>
</html>

使元素产生阴影的效果

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>产生阴影的效果</title>
	<style type="text/css">
		.shadow{
			width: 200px;
			height: 200px;
			background-color: purple;
			box-shadow: 0 0 5px red /*inset*/;/*分别为：水平偏移 垂直偏移 模糊程度 颜色*/
		}
	</style>
</head>
<body>
	<div class="shadow">
		
	</div>
</body>
</html>