Web前端基础CSS初识学习笔记（10）简单实例认识 border-radius

最新推荐文章于 2026-03-27 15:21:11 发布

原创最新推荐文章于 2026-03-27 15:21:11 发布 · 334 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何使用CSS的border-radius属性来创建不同类型的圆角边框效果，包括简单的圆角、圆形以及复杂的多边形形状。通过具体的代码实例，展示了如何根据不同需求设置边框的弧度，为网页设计提供了丰富的视觉效果。

圆角边框（sublime环境）


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		div {
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
		div:first-child {  /* 结构伪类选择器 选亲兄弟 */
			border-radius: 10px;  /*  一个数值表示4个角都是相同的 10px 的弧度 */ 
		}

		div:nth-child(2) {
			/*border-radius: 100px;    取宽度和高度 一半  则会变成一个圆形 */
			border-radius: 50%;   /*  100px   50% 取宽度和高度 一半  则会变成一个圆形 */
		}

		div:nth-child(3) {
			border-radius: 10px 40px;  /* 左上角  和 右下角  是 10px  右上角 左下角 40 对角线 */
		}
		
		div:nth-child(4) {
			border-radius: 10px 40px  80px;   /* 左上角 10    右上角  左下角 40   右下角80 */
		}
		div:nth-child(5) {
			border-radius: 10px 40px  80px  100px;   /* 左上角 10    右上角 40  右下角 80   左下角   右下角100 */
		}
		div:nth-child(6) {
			border-radius: 100px;  
			height: 100px; 
		}
		div:nth-child(7) {
			border-radius: 100px 0;  
		}	
        </style>
    </head>
    <body>
    <div> 20px</div>
    <div> 50%  或者 100px</div>
    <div>10px 40px</div>
    <div>10px 40px  80px</div>
    <div>10px 40px  80px  100px</div>
    <div>123</div>
    <div><div>
    </body>
</html>

打开结果
在这里插入图片描述