CSS实现圆,圆角边框

最新推荐文章于 2024-09-25 09:11:55 发布

原创最新推荐文章于 2024-09-25 09:11:55 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

本文详细介绍了如何使用CSS属性border-radius创建圆形和圆角边框效果。通过设置不同值，可以轻松实现从正圆到椭圆的变化，同时展示了如何为矩形元素的各个角设置不同的弧度。

用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>