您的位置:首页> 前端教程> CSS3教程
文章导航

CSS border-radius 属性

2019-9-17 08:58| 作者: admin| 查看: 3101| 评论: 0|来自: 蚂蚁部落

通过border-radius属性可以实现元素的圆角效果。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
div{ 
  width:420px; 
  height:420px; 
  background-color:#999; 
  border-radius:80px; 
  margin:0px auto; 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

使用border-radius:80px实现了一个矩形圆角效果。

如果border-radius只有一个属性值,那么同时设置四个圆角的半径,这里的80px就是圆角的半径值。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201807/20/011043d2zy277pvisudwyf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看出圆角半径分为水平半径和垂直半径,border-radius提供了设置水平半径和垂直半径的方式:

[CSS] 纯文本查看 复制代码
border-radius:水平半径/垂直半径

两者之间用"/"分隔,如果只设置水平半径,那么垂直半径的值和水平半径值相同。

此属性可以具有四个参数(水平半径/垂直半径看做一个参数),设置规则如下:

(1).如果只设置了一个参数,那么四个圆角都使用这个参数值。

(2).如果设置了两个参数,第一个参数用于左上角和右下角,第二个参数用于右上角和左下角。

(3).如果设置了三个参数,第一个参数用于左上角,第二个参数用于右上角和左下角,第三个参数用于右下角。

(4).如果设置了四个参数,那么分别作用于四个角,从左上角开始,按顺时针。

特别说明:属性值可以是整数也可以是百分比,具体参阅border-radius以百分比设置圆角一章节。

设置两个值:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style> 
div{ 
  width:420px; 
  height:420px; 
  background-color:#999; 
  border-radius:80px 40px; 
  margin:0px auto; 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

设置三个值:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style> 
div{ 
  width:420px; 
  height:420px; 
  background-color:#999; 
  border-radius:80px 40px 60px; 
  margin:0px auto; 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

设置四个值:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
div{ 
  width:420px; 
  height:420px; 
  background-color:#999; 
  border-radius:30px 50px 60px 80px; 
  margin:0px auto; 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

在以上代码中,设置的水平半径和垂直半径都是相同的,下面给出几个分别设置水平半径和垂直半径的代码:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css"> 
div{ 
  width:420px; 
  height:420px; 
  background-color:#999; 
  border-radius:30px/80px; 
  margin:0px auto; 
} 
</style> 
</head> 
<body> 
  <div></div> 
</body> 
</html>

以上代码可以将四个圆角的水平半径和垂直半径值设置为30px和80。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style> 
div{ 
  width:420px; 
  height:420px; 
  background-color:#999; 
  border-radius:30px 60px/80px; 
  margin:0px auto; 
} 
</style> 
</head> 
<body> 
  <div></div> 
</body> 
</html>

以上代码将左上角和右下角的水平半径值设置为30px,右上角和左下角的半径值设置为60px,将四个圆角的垂直半径设置为80px。

单独设置圆角:

设置圆角半径值类似于设置边框值一样,可以单独设置某一个圆角的半径值:

(1).border-top-left-radius用于设置左上角圆角半径值。

(2).border-top-right-radius用于设置右上角圆角半径值。

(3).border-bottom-right-radius用于设置右下角圆角半径值。

(3).border-bottom-left-radius用于设置左下角圆角半径值。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />> 
<title>CSS学习-蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  width:420px; 
  height:420px; 
  background-color:#999; 
  border-top-left-radius:80px; 
  margin:0px auto; 
} 
</style> 
</head> 
<body> 
  <div></div> 
</body> 
</html>

以上代码可以将左上角圆角的水平半径和垂直半径都设置为80。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS学习-蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  width:420px; 
  height:420px; 
  background-color:#999; 
  border-top-left-radius:40px 80px; 
  margin:0px auto; 
} 
</style> 
</head> 
<body> 
  <div></div> 
</body> 
</html>

以上代码将左上角圆角的水平半径和垂直半径设置为40px和80px。这里就不用"/"分隔了,用空格即可。

上面所有的代码都是设置水平半径和垂直半径是相同的,因为一个方位上的圆角只使用一个值。

下面通过代码实例介绍一下如何分别设置水平半径和垂直半径。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>CSS学习-蚂蚁部落</title> 
<style type="text/css"> 
div{ 
  width:420px; 
  height:420px; 
  background-color:#999; 
  border-radius:100px 50px 80px/ 60px 50px; 
  margin:0px auto; 
} 
</style> 
</head> 
<body> 
  <div></div> 
</body> 
</html>


[CSS] 纯文本查看 复制代码
border-radius:100px 50px 80px/ 60px 50px;

上面的代码与下面代码等价:

[CSS] 纯文本查看 复制代码
border-top-left-radius: 100px 60px;
border-top-right-radius: 50px 50px;
border-bottom-right-radius: 80px 60px;
border-bottom-left-radius: 50px 50px;

如果元素具有边框,那么就要分内圆角和外圆角,可以参阅border-radius带border边框一章节。

1

鲜花

握手

雷人

路过
1

鸡蛋

刚表态过的朋友 (2 人)

最新评论

返回顶部