快捷导航
蚂蚁部落 网站首页 前端教程 CSS3教程 查看内容

栏目导航

≡文本≡

≡颜色≡

≡渐变≡

≡边框≡

≡背景≡

≡transform变换≡

≡transition过渡≡

≡animation动画≡

≡column多列布局≡

≡flex弹性布局≡

≡其他≡

CSS3 border-radius

2017-7-14 10:51| 发布者: admin| 查看: 504| 评论: 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:10px实现了一个矩形圆角效果。

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

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/09/131422vzmb8onwmzs2w01o.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边框一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| 蚂蚁部落 ( 鲁ICP备10022556号-3 )

GMT+8, 2017-7-24 16:51 , Processed in 0.062506 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部