利用css3绘制一个圆角边框

最新推荐文章于 2024-05-23 00:00:00 发布

Flee23

最新推荐文章于 2024-05-23 00:00:00 发布

阅读量469

点赞数

本文链接：https://blog.csdn.net/destiny1234544/article/details/106504262

版权

在css3出现之前，我们要定义一个圆角边框，需要提前绘制好图形，但是在追求效率的需求下，css3推出了边框样式大大提升了网页制作的效率，用户只需要输入一段简单的代码就可以绘制圆角边框，这就需要使用到css3中的border-radius属性，我们只需要在border-radius属性中定义半径R就可以实现圆角的效果，下图是未实现圆角前的效果：
在这里插入图片描述
下面展示一些 border-radius的内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
var foo = 'bar';
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-radius属性</title>
    <style>
        div{
            width:300px;
            height:150px;
            background-color: #000000;
            border: solid 30px green;
            border-radius: 30px;
        }
    </style>
</head>
<body>
<h1>border-radius属性</h1>
<div></div>
</body>
</html>

下面是使用了border-radius属性后的效果
在这里插入图片描述
同时border-radius可以指定两个半径，第一个半径作为边框左上角和右下角的圆半径，第二个半径作为边框右上角和左下角的圆半径，分别来实现各个角的圆角效果。
比如定义border-radius：30px 90px；那么左上和右下的半径为30px，左下和右上的半径为90px，实现效果如下：
在这里插入图片描述
如果想要单独设置各个角的半径可以使用（border-top/bottom-right/left-radius）来设置自己想要得到的各个角的半径。border-radius还有一个重要的特性：当border-radius属性不显示边框时，浏览器会自动把背景4个角制成圆角即黑色区域部分。border-radius最有趣的一个功能就是设置边框的类型，我们上面使用的是solid边框，还可以使用dashed边框。

Flee23

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用css3绘制一个圆角边框

在css3出现之前，我们要定义一个圆角边框，需要提前绘制好图形，但是在追求效率的需求下，css3推出了边框样式大大提升了网页制作的效率，用户只需要输入一段简单的代码就可以绘制圆角边框，这就需要使用到css3中的border-radius属性，我们只需要在border-radius属性中定义半径R就可以实现圆角的效果，下图是未实现圆角前的效果：下面展示一些 border-radius的内联代码片。// A code blockvar foo = 'bar';// An highlighted bl
复制链接

扫一扫