原创作品，转载需得到原作者书面许可，同时保留原作者和出处，否则将追究法律责任。
绘制圆角效果是常见的操作，因为带有一定弧度的图案可能更加圆润自然。
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 { margin:0px auto; width: 100px; height: 100px; background-color:green; border-radius: 50px; } </style> </head> <body> <div></div> </body> </html>
代码运行效果截图如下：
矩形的长宽高是100px，然后将圆角半径设置为50px，生成一个圆形效果。
可见通过border-radius属性可以非常简单的实现圆角效果，下面详细对其一下介绍。
一.语法结构：
border-radius属性绘制的圆角不一定是正圆，也可能是椭圆，具体效果由水平半径与垂直半径决定。
简单总结如下：
（1）.一个矩形可以具有一到四个圆角。
（2）.圆角是一个正圆或者椭圆的四分之一。
（3）.圆角的水平半径和垂直半径并不一定相等。
再来分析一下它的具体语法实现，属性值用于规定圆角半径的尺寸。
既可以是length格式，也可以是百分比格式，后续文章会进行详细分析。
属性值大致可以分为具有斜杠和不具有斜杠两种。
不具有斜杠：
如果参数值不具有斜杠，那么水平半径与垂直半径尺寸相同。
（1）.一个属性值：
此属性值作用于四个圆角，代码片段如下：
[CSS] 纯文本查看 复制代码div { margin:0px auto; width: 100px; height: 100px; background-color:green; border-radius: 20px; }
代码运行效果截图如下：
（2）.两个属性值：
第一个属性值作用于左上和右下圆角。
第二个属性值作用于右上和左下圆角。
代码片段如下：
[CSS] 纯文本查看 复制代码div { margin:0px auto; width: 100px; height: 100px; background-color:green; border-radius: 20px 10px; }
代码运行效果截图如下：
（3）.三个属性值：
第一个属性值作用于左上圆角。
第二个属性值作用于右上和左下圆角。
第三个属性值作用于右下圆角。
代码片段如下：
[CSS] 纯文本查看 复制代码div { margin:0px auto; width: 100px; height: 100px; background-color:green; border-radius: 20px 10px 30px; }
代码运行效果截图如下：
（4）.四个属性值：
第一个属性值作用于左上圆角。
第二个属性值作用于右上圆角。
第三个属性值作用于右下圆角。
第四个属性值作用于左下圆角。
代码片段如下：
[CSS] 纯文本查看 复制代码div { margin:0px auto; width: 100px; height: 100px; background-color:green; border-radius: 10px 20px 30px 40px; }
代码运行效果截图如下：
具有斜杠：
不具有斜杠的时候，水平半径与垂直半径的尺寸没法分别规定。
采用具有斜杠的语法结构，可以解决上述问题，看如下代码：
[CSS] 纯文本查看 复制代码div { margin:0px auto; width: 100px; height: 100px; background-color:green; border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px; }
代码运行效果截图如下：
分析如下：
（1）.斜杠左侧的参数用于规定圆角水平直径尺寸。
（2）.斜杠右侧得参数用于规定圆角垂直直径尺寸。
（3）.两侧的数据按照左上角、右上角、右下角和左下角顺序生效。
（4）.两侧数据可以规定一个或者四个，生效顺序与没有斜杠时相同。
二.百分数作为属性值：
属性值也可以是百分比格式，使用方式与length格式相同。
唯一需要搞清楚的是，百分别格式的尺寸参考对象。
为了节省篇幅，具体参阅CSS border-radius 百分数一章节。
三.带有边框的圆角效果：
前面的例子中，矩形不带有边框，当然也可以带边框。
原理都是一样的，单独拿出来介绍，主要是为了提醒几个注意点。
为了节省篇幅，具体参阅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 { margin:0px auto; width: 100px; height: 100px; background-color:green; border-radius: 200px; } </style> </head> <body> <div></div> </body> </html>
div的宽高都是100px，但是设置圆角半径尺寸是200px。
很明显，相邻圆角直径的和是400px，远超过div的尺寸。
这个时候，浏览器会自动重新计算一个恰当的值，保证使它们处于不重合的临界状态。
所以浏览器重新给半径赋值为50px，恰好生成一个正圆，相邻的直径恰好不会重合。
五.水平直径和垂直直径尺寸比例规定：
这是很重要的一个特点，很多初学者比较容易忽视。
看如下代码实例：
[HTML] 纯文本查看 复制代码运行代码<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> div { margin:0px auto; width: 200px; height: 300px; background-color:green; border-radius:200px; } </style> </head> <body> <div></div> </body> </html>
代码运行效果截图如下：
代码分析如下：
（1）.规定水平和垂直半径的尺寸都为200px。
（2）.但是矩形宽度只有200px，所以浏览器会重新计算，将水平直径尺寸定位100px。
（3）.矩形高度是300px，那是不是垂直半径被重新计算为150px呢，答案是否定的。
（4）.我们规定水平和垂直半径的尺寸都是200px，它们是相等的，这个比例要永恒保持下去。
（5）.所以垂直半径的尺寸也是100px。
前端教程
HTML5 API
鲁ICP备10022556号-3
鲁公网安备 37021302000666号
关于我们
|手机版|小黑屋|
Copyright © 2012-2020 Design: 蚂蚁部落
最新评论