CSS3 圆角边框border-radius

提问人：刘团圆发布时间：2020-11-19

border-radius属性是一个简写属性，用于设置四个border-*-radius属性，语法如下:

border-radius: 1-4 length|% / 1-4 length|%;

四个border-*-radius属性的顺序如下:

•border-top-left-radius:左上。

•border-top-right-radius:右上。

•border-bottom-right-radius:右下。

•border-bottom-left-radius:左下。

在圆角边框属性出现之前，如果想要得到一个带有圆角边框的按钮，则需要借助一些绘图软件才可以实现。这样做的缺点是：一个页面中的元素需要美工和前端两个人配合才能完成，大大降低了工作效率；图片要比几行代码大许多，这就导致页面加载速度变慢，用户体验极其不好。

下面就用CSS3的圆角边框属性来写一个让人惊艳的扁平化按钮吧！

【例题】使用border-radius属性

代码如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

body{

background: #ccc;

}

div{

width: 200px;

height: 50px;

margin:20px auto;

font-size: 30px;

line-height: 45px;

text-align: center;

color:#fff;

border:2px solid #fff;

border-radius: 10px;

}

</style>

</head>

<body>

<div>button</div>

</body>

</html>

相关视频回答

点击加载更多评论>>