标签：top border 博客 水平 lin 内联 block 样式 hive
技巧：利用border-radius属性产生圆，椭圆等形状
声明：博客园代码编辑器把内联样式里的border-radius给过滤了，所以页面上看不到椭圆效果。
border-radius按照顺序依次设定border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
没有继承性，适用于CSS动画。border-radius可以单独指定水平半径和垂直半径，中间用一个斜杠/分隔。
当任意两个相邻圆角的半径之和超过border-box的尺寸时，用户代理必须按照比例减小各个边框半径所使用的值，直到它们不会互相重叠。
border-radius不仅可以接受长度值，还可以接受百分比值。这个百分比是基于元素的尺寸进行解析的，垂直半径的百分比是相对元素的高度进行解析，水平半径的百分比是相对于元素的宽度进行解析。
本质理解：border-radius是对元素的border-box进行切圆角处理，边框外侧的拐角作为切圆角的基准，边框内侧的圆角会稍微小一些。严格来说是max(0, [border-radius]-[border-width])
常规图形
1.朝上的半椭圆
border-radius: 50% / 100% 100% 0 0;
当某一个方向的半径为0时，另外一个方向的半径可以是任意值。
2. 朝左的半椭圆
border-radius: 100% / 50% 0 0 50%;
3. 四分之一的椭圆
border-radius: 100% 0 0 0;
作品欣赏
http://simurai.com/archive/buttons
展示了各种奇妙的形状
参考案例地址
play.csssecrets.io/quarter-ellipse
play.csssecrets.io/half-ellipse
play.csssecrets.io/ellipse
标签：top border 博客 水平 lin 内联 block 样式 hive
原文地址：http://www.cnblogs.com/joyjoe/p/6115729.html
