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

CSS border-radius 百分比

2019-11-20 17:20| 作者: admin| 查看: 2251| 评论: 0|来自: 蚂蚁部落

关于此属性的具体用法可以参阅CSS border-radius一章节。

border-radius属性值不但可以使length格式,也可以是百分比格式。

length格式有明确的值,百分比格式必须有一个参考对象,本文目就是搞清楚这个参考对象。

代码实例如下:

[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: 100px; 
  height: 100px; 
  border: 50px solid green; 
  border-radius: 50px; 
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/172158kz819tonoad83qpn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码规定圆角尺寸是50px,边框的尺寸也是50px。

所以内部没有产生圆角效果,具体参阅CSS 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: 100px; 
  height: 100px; 
  border: 50px solid green; 
  border-radius: 50%; 
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201911/20/172243nqn3nbx23rn54gi3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面对上述代码进行一下分析:

(1).此代码和第一段代码唯一的区别就是border-radius属性值修改为50%。

(2).很多人认为百分比的参考对象是元素width或者height。

(3).如果真是这样的话,border-radius实际值就是50px。

(4).很明显不是,因为否则两段代码的效果就完全一样了。

(5).百分比的参考对象是:边框+内边距+height/width。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部