当前位置： 移动技术网 > IT编程>网页制作>HTML > Web前端基础CSS初识学习笔记（5）简单实例认识 border-radius

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

2020年07月14日  | 移动技术网IT编程  | 我要评论

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

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

本文地址：https://blog.csdn.net/Fightingdddd/article/details/107301514

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网