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

CSS3 border-radius百分数

2018-7-20 01:12| 作者: admin| 查看: 1130| 评论: 0|来自: 蚂蚁部落

border-radius属性的基本用法可以参阅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">
div {
  width:100px;
  height:100px;
  background:green;
  border-radius:50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的代码绘制了一个绿色的圆形。

非常的简单,首先创建一个正方形,然后将圆角的半径设置为正方形宽度或者高度的一半即可。

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;
  background:green;
  border-radius:50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

设置属性值为百分之五十同样可以实现效果,有没有想过为什么是百分之50%,如果百分之六十呢。

代码实例如下:

[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;
  background:green;
  border-radius:60%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

设置百分之六十也是能够绘制一个圆形,下面对此做一下介绍。

[CSS] 纯文本查看 复制代码
border-radius:60%;

上面的代码是设置四个角的水平半径和垂直半径都是对应的宽和高的百分之六十。

很明显在水平方向和垂直方位相邻两个角的半径之和大于div的宽度和高度,这很明显是不合理的。

这个时候,渲染引擎会同时均匀缩放水平和垂直方位的半径,直到恰好适合div的宽度或者高度。

其实对于非百分比的数字也是同样的道理,上面仅仅是以百分比做个引子而已:

[CSS] 纯文本查看 复制代码
div {
  width:100px;
  height:100px;
  background:green;
  border-radius:60px;
}

同样也会进行缩小,以恰好适合div的宽度或者高度。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部