CSS3 Border-radius

最新推荐文章于 2024-04-18 15:07:49 发布

u-wind14

最新推荐文章于 2024-04-18 15:07:49 发布

阅读量1k

点赞数

分类专栏：前端笔记文章标签： css3 实例

本文链接：https://blog.csdn.net/wind14/article/details/71308246

版权

前端笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

border-radius属性可以给任何元素设置圆角
而border-radius设值有许多种方式，下面实例给大家演示设值
默认 border-radius: none;

<!DOCTYPE html>
<html>
<head>
    <title>边框属性圆角矩形边框</title>
    <style type="text/css">
        .b1{
            display: inline-block;
            width: 150px;
            height: 150px;
            background: RGB(201,176,158);
            padding: 20px;
            /*一个值 四个圆角值相同*/
            border-radius: 12px;
        }
        .b2{
            display: inline-block;
            width: 150px;
            height: 150px;
            border: 5px solid RGB(201,176,158);
            /*两个值 第一个值为左上角与右下角，第二个值为右上角与左下角*/
            border-radius: 12px 50px;
        }
        .b22{
            display: inline-block;
            width: 150px;
            height: 150px;
            background: RGB(201,176,158);
            padding: 20px;
            /*两个值 水平半径/垂直半径*/
            border-radius: 50px/50px;
        }
        .b3{
            display: inline-block;
            width: 150px;
            height: 150px;
            background: RGB(201,176,158);
            padding: 20px;
            /*三个值 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角*/
            border-radius: 12px 50px 30px;
        }
        .b4{
            display: inline-block;
            width: 150px;
            height: 150px;
            background: RGB(201,176,158);
            padding: 20px;
            /*四个值 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角 顺时针*/
            border-radius: 12px 23px 34px 45px;
        }
        .b5{
            display: inline-block;
            width: 150px;
            height: 150px;
            background: RGB(201,176,158);
            padding: 20px;
            /*单独设置*/
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 30px;
        }
    </style>
</head>
<body>
<div class="b1">b1</div>
<div class="b22">b22</div>
<div class="b2">b2</div>
<div class="b3">b3</div>
<div class="b4">b4</div>
<div class="b5">b5</div>
</body>
</html>

结果如下：
这里写图片描述
有很多看官有可能对水平半径和垂直半径不理解，上张图你就懂了

[tips: 图片来源于网络，侵删]

u-wind14

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 Border-radius

border-radius属性可以给任何元素设置圆角而border-radius设值有许多种方式，下面实例给大家演示设值默认 border-radius: none;<!DOCTYPE html><html><head> <title>边框属性圆角矩形边框</title> <style type="text/css"> .b1{
复制链接

扫一扫