css实现圆角矩形

2023-09-13 01:23| 来源: 网络整理| 查看: 265

一个在日常开发中，前端人员经常会遇到圆角矩形，让我们一起来学习一下圆角矩形吧，下面直接上代码

Document div { width: 100px; height: 100px; margin: 300px auto; background-color: skyblue; }

原本样式: 在这里插入图片描述 css给盒子添加左上角矩形代码:border-top-left-radius:50px

Document div { width: 100px; height: 100px; margin: 300px auto; background-color: skyblue; //border 边框得意思 top-left 左上角 radius 半径 border-top-left-radius: 50px; }

实现效果：在这里插入图片描述

border-top-left-ridius:10px //左上角添加矩形 border-top-right-radius:10px //右上角添加矩形 border-bottom-left-ridius:10px //左下角添加矩形 border-bottom-right-ridius:10px //右下角添加矩形简写: 第一种方法,给4个角分别加上不同得矩形好处:可以给不同得角添加矩形坏处:需要写4次才能给4个角全部添加 border-radius: 左上角右上角右下角左下角 //按照顺时针顺序记忆第二种方法: 直接给4个角添加矩形好处:一步到位,不需要写很多个位置坏处:直接给4个角添加了矩形，不能给4个以下边角矩形 border-radius:10px 注意:当数值越大,圆角弧度也就越大

【本文地址】

公司简介

联系我们