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

最新推荐文章于 2024-04-12 22:35:54 发布

站起一棵树

最新推荐文章于 2024-04-12 22:35:54 发布

阅读量231

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/Fightingdddd/article/details/107301514

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

圆角边框（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>

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

站起一棵树

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端基础CSS初识学习笔记（10）简单实例认识 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 { /* 结构伪类选择器选亲兄弟 */ bo
复制链接

扫一扫