css3 之border-radius 属性解析

在css 设置样式的时候，有时候会用到将元素的边框设置为圆形的样子的时候，一般都是通常直接设置：{border-radius:5px },这样就行了，但是到底是什么意思，一直以来都没有弄明白，只是知道这样设置可以将边框设置成圆形的样子

其实：border-radius 属性的参数，不仅仅可以写一个参数，也可以写两个参数，三个参数，或者四个参数，另外，还可以写写百分比(这里的百分比，是针对border本身的尺寸来的）

格式：

border-radius:none | length{1,4}[/length{1,4}]

其中，length 也可以使用百分比来表示

1. 当 border-radius 为none 时，表示不进行圆弧式的修边

2. 当 length 有值时，有几种情况

2.1 length有一个值，这时border 的四个角的 border-radius 都是一样的值，即 border-top-left ,border-top-right,border-bottom-right,border-bottom-left 四个值都相等

2.2 length 有两个值时，border 对角的 border-radius 相等，第一个值为 border-top-left/border-bottom-right ,第二个值为border-right-top / border-bottom-left

2.3 length 有三个值时，第一个值为 border-top-left,第二个值为border-top-right/border-bottom-left, 第三个值为border-bottom-right

2.4 length 有四个值时，第一个值为 border-top-left,第二个值为border-top-right, 第三个值为border-bottom-right，第四个值为border-bottom-left

顺序：顺时针排序

2.5 此外，还需要做浏览器兼容：如

1 -webkit-border-radius: 10px 20px 30px; 
2 -moz-border-radius: 10px 20px 30px; 
3 border-radius: 10px 20px 30px;

3.设置一个图片的角落成圆弧型的效果：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         img {
10             margin: 100px;
11             border-radius: 15px;
12         }
13     </style>
14 </head>
15 <body>
16     <div>
17         <img src="./110.jpg" alt="" width="230" height="160">
18     </div>
19 </body>
20 </html>

运行效果：

设置border-radius 参数为两个时：

1  <style>
2         img {
3             margin: 100px;
4             border-radius: 15px 5px;
5         }
6 </style>

设置border-radius 参数为3个时：

1 <style>
2         img {
3             margin: 100px;
4             border-radius: 30px 20px 10px;
5         }
6 </style>

设置border-radius 参数为4 个是时：

1  <style>
2         img {
3             margin: 100px;
4             border-radius: 30px 20px 10px 5px;
5         }
6 </style>

设置弧形半径为百分比时：

1  <style>
2         img {
3             margin: 100px;
4             border-radius: 10% 35%;
5         }
6 </style>

posted on 2018-03-17 20:42 huanying2015 阅读(629) 评论(2) 编辑收藏举报