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

CSS3 border-radius带边框

2018-7-20 01:13| 作者: admin| 查看: 1369| 评论: 1|来自: 蚂蚁部落

关于圆角的基本用法可以参阅CSS3 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">
.ant{
   width:200px;
   height:100px;
   border: 15px solid green;
   border-radius: 15px;
}
</style>
</head>
<body>
<div class="ant"></div>
</body>
</html>

上面的代码表现截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201807/22/155933uva2cyr6acmmvcca.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面的代码绘制的圆角只有外半径,没有内半径。

如果把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">
.ant{
  width:200px;
  height:100px;
  border: 15px solid green;
  border-radius: 25px;
}
</style>
</head>
<body>
<div class="ant"></div>
</body>
</html>

上面的代码表现截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201807/22/155816cyzjn3yr6tp61s0r.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

这个时候就有内半径了,下面对此做一下介绍。

外圆角的半径是border-radius属性值,但内圆角半径是外圆角的border-radius属性值减去对应边框的值。

同时我们也可以得出,当边框宽度为0的时候,内圆角半径和外圆角半径才是相等的。

如果圆角是百分比,将会分别应用于外圆角(百分比x边框宽度)和内圆角(百分比x元素宽度或者高度)

1

鲜花

握手

雷人

路过
2

鸡蛋

刚表态过的朋友 (3 人)

发表评论

最新评论

引用 23455 2019-7-13 21:55
11qqqq

查看全部评论(1)

返回顶部