与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