CSS圆角border-radius

liuyan1106_

于 2020-08-30 12:07:35 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS/CSS3 文章标签： css css3

本文链接：https://blog.csdn.net/liuyan1106_/article/details/108304706

CSS/CSS3 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何使用CSS的border-radius属性为网页元素添加圆角边框效果，包括属性定义、语法说明及实例演示，适合前端开发者学习掌握。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div {
    border-radius: 25px;
	<!-- 
		相等于以下代码：
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;
		border-bottom-right-radius: 25px;
		border-bottom-left-radius: 25px;
	-->
}

一、属性定义

border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

二、语法

border-radius: 10px ｜ 10%；

注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

三、举例

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>测试圆角</title> 
<style> 
div {
	border: 2px solid #a1a1a1;
	padding: 10px 40px; 
	background: #dddddd;
	width: 300px;
	border-radius: 25px;
}
</style>
</head>
<body>

<div>border-radius 属性允许您为元素添加圆角边框！ </div>

</body>
</html>