css实现圆角矩形

最新推荐文章于 2024-02-24 21:40:11 发布

古塔前端

最新推荐文章于 2024-02-24 21:40:11 发布

阅读量4.7k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_45321331/article/details/106389283

版权

css 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 300px auto;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 300px auto;
            background-color: skyblue;
            //border 边框得意思  top-left 左上角  radius 半径
            border-top-left-radius: 50px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

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

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 
注意:当数值越大,圆角弧度也就越大

古塔前端

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
css实现圆角矩形

一个在日常开发中，前端人员经常会遇到圆角矩形，让我们一起来学习一下圆角矩形吧，下面直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=], initial-scale=1.0"> <title>Document</title> &lt
复制链接

扫一扫

专栏目录