CSS3 圆角边框(border-radius)

最新推荐文章于 2022-07-15 16:29:33 发布

houyanhua1

最新推荐文章于 2022-07-15 16:29:33 发布

阅读量468

点赞数

本文链接：https://blog.csdn.net/houyanhua1/article/details/79644886

版权

CSS 同时被 3 个专栏收录

65 篇文章 1 订阅

订阅专栏

HTML5

54 篇文章 1 订阅

订阅专栏

CSS3

33 篇文章 0 订阅

订阅专栏

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

		.box {
			width: 300px;
			height: 300px;
			margin: 100px auto;
			border: 1px solid #000;
			background-color: pink;

			border-radius: 60px 70px 80px 90px;  /* 从左上角开始,都是圆形半径 */
			border-top-left-radius: 120px 60px;  /* 椭圆角 水平方向半径120px  垂直方向半径60px */
			border-radius: 120px 120px 120px 120px/60px 60px 60px 60px;  /* 椭圆半角 前四个水平半径 后四个垂直半径 */
			border-radius: 120px/60px;    /* 椭圆半角 四个角相同可以简写 */
			border-radius: 60px 100px 120px;
			border-radius: 50%;   /* (圆形)可以用百分比 */
			border-radius: 100% 0 0 0;   /* 扇形 */
		}

	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>