CSS实现圆,圆角边框

用CSS可以实现圆,圆角边框,下面具体演示一下这两个图案

一.圆形
思路:圆形实际上是在一个正方形的基础上加一个border-radius属性实现的
代码如下:

<style>
        div {
            height: 100px;
            width: 100px;
            border-radius: 50px;
            background-color: pink;
        }
    </style>

[注]:这里的border-radius可以用50%代替50px,赋50px之外的值会变成椭圆形
效果图如下:

二.圆角边框
思路:首先构建一个矩形,再给矩形的四个角相应的弧度
代码如下:

<style>
        div {
            height: 100px;
            width: 100px;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            border-bottom-left-radius: 20px;
            background-color: pink;
        }
    </style>

上面代码可以替换成简写如下:

 <style>
        div {
            height: 100px;
            width: 100px;
            border-radius: 20px 20px 20px 20px;
            background-color: pink;
        }
    </style>

[注]:简写的顺序是 : 左上角 右上角 右下角 左下角
效果图如下: