CSS圆角边框

最新推荐文章于 2024-09-04 11:29:08 发布

安澜仙王

最新推荐文章于 2024-09-04 11:29:08 发布

阅读量1.3k

点赞数 1

分类专栏： # CSS 文章标签： CSS3 border-radius 圆角边框样式前端开发

本文链接：https://blog.csdn.net/sinat_28317385/article/details/119619093

版权

CSS 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角
语法:

border-radius:length;

radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果

参数值可以为数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
如果是个矩形，设置为高度的一半就可以做类似下图

该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角
分开写:border-top-left-radius、border-top-right-radius、border-bottom-left-radius、order-bottom-right-radius、

<!DOCTYPE html>
<html>
<head>
	<title>测试</title>
	<style type="text/css">
		.test {
			width:100px;
			height: 100px;
			background-color: green;
			border-radius:50px 10px 20px 30px;
		}
	</style>
</head>
<body>
	<div class="test"></div>
</body>
</html>