border-radius | 易学教程

今天想找个例子，才发现以前对这个属性理解不深，先记下来

这个属性支持浏览器IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4

首先这里用的chrome浏览器测试

其次border-radius和-webkit-border-radius在同样属性的时候，表现并不一样

.test1{-webkit-border-radius:30px 10px;
width:100px;height:100px;background:#f6e30b;border: 1px solid #eda306;
}
.test2{border-radius:30px 10px;
width:100px;height:100px;background:#f6e30b;border: 1px solid #eda306;
}

本来就是用的-wibkit-内核，所以建议，写的时候，格式最好把纯粹的写法写在最下面，如这样

.test1{-webkit-border-radius:30px 10px;
       border-radius:30px 10px;
       width:100px;height:100px;background:#f6e30b;border: 1px solid #eda306;
      }

首先一般都会写类似 border-radius:10px; 这样的

div{border-radius:50px;
    width:50px;height:50px;background:#f6e30b;border: 1px solid #eda306;
    }

　　如果值和宽高一样，就是圆形的。

其实这是一种简写，就像border一样，正常是这样的

border-top-left-radius:50px;
border-top-right-radius:50px;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;

简写的话，分别是左上、右上、左下、右下，正好是顺时针方向

另外的简写的话

div{border-radius:30px 10px;      //刚好对角
     width:100px;height:100px;background:#f6e30b;border: 1px solid #eda306;
     }

//刚好对角

div{border-radius:30px 30px 10px;     //还是按照顺序，左上、右上是两个就是加上左下，右下
     width:100px;height:100px;background:#f6e30b;border: 1px solid #eda306;
     }

//还是按照顺序，左上、右上是两个就是加上左下，右下

另外今天写这个是因为看到一种写法

div{border-radius: 2em/1em}

中间加了一个 / ，第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径，所以就可以画一个左右不对称的圆角

分开写的话要这么写，还是分别左上、右上、左下、右下

div{border-radius:10px 20px 30px 40px/40px 30px 20px 10px}

一个是水水平的，一个是垂直的，看左上角的就是水平较平，垂直较圆（10/40）

可以用简写

div{border-radius:{100px / 10px}
div{border-radius:{100px 50px / 10px 30px}

制作半圆

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
.div1{height:200px;width:100px;background:yellow;border-radius:100px 0px 0px 100px;border:1px solid #fcc507;}
  </style>
</head>
<body>
  <div class="div1"></div>
</body>
</html>

如果要做朝上的半圆，可以把高定成宽的一半，只要记住顺序，顺时针嘛

如果要做空心圆的话，设置一个border就行了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
.div1{height:100px;width:100px;background:yellow;border-radius:100px;border:20px solid #fcc507;}
  </style>
</head>
<body>
  <div class="div1"></div>
</body>
</html>

另外还能做很多好玩的东西，

来源：http://www.cnblogs.com/change-oneself/p/4921209.html

标签

border-radius

border

background