与border相关被遗漏的属性及图标制作

一开始看到上图时，以为只需设置下border-top-left-radius就可以了

.demo{
width:100px;
height: 100px;
border-top: 20px solid black;
border-left: 20px solid black;
border-top-left-radius: 20px;
box-sizing: border-box;
}

结果发现得到了这种图形



嘛。。和想象中的不太一样，内圆角去哪儿了？
查资料发现，其实是一直没明白这个radius属性的真正意思，其实是做了一个与两条边组成的直角相切的内切圆，border-radius的值是内切圆的半径，官方给出的图如下：



由此可以知道：
当border-radius的值小于或等于border-width时，没有内圆角；
当border-radius的值大于border-width时，有内圆角；
所以我的demo中其实是这个样子的。。



新发现
在查阅文档的过程中还发现了

border-top-left-radius

(

border-top-right-radius

, 

border-bottom-right-radius

 ，

border-bottom-left-radius

)还可以使用两个半径，这时确定的是一个椭圆，第一个值是椭圆的半长轴，第二值为椭圆的半短轴。如果只有一个值就是圆啦~



其实border-width也可以添加4个值，分别为上，右，下，左；如果两个值，分别为垂直，水平方向
稍微修改一下可以得到下面类似鹰嘴的造型：

.demo{
width:100px;
height: 50px;
border-width: 0 20px;
border-top:20px solid black;
border-top-left-radius: 40px 45px;
box-sizing: border-box;
}

仿一个平面内的Opera~

.demo-seven{
width:100px;
height: 100px;
border:20px solid #D62427;
border-width: 10px 25px;
border-radius: 50px;
box-sizing: border-box;
}

最后再来画个小图标吧~







本文相关资料链接：http://www.imooc.com/video/11619