css3 深刻认识border-color和border-radius的属性

　

bordercolor

1.border-radius 属性:

我们先看看下面的图片：

如果你们看到这个图片该怎么写的？先思考一下

代码如下：

.box{
        width: 200px; 
        height: 200px; 
        display: block;
        background: #f00;
        border-top-left-radius:100px;
        border-top-right-radius:200px; 
        border-bottom-left-radius:150px; 
        border-bottom-right-radius:80px;  
     }
<p class="Outer">
        <p class="box"></p>
    </p>

我这边分别写的定义4个边的角度的，

---

这里你们要注意的：

只有一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等；

只有一个值，那么 top-left、top-right、bottom-right、bottom-left 四个值相等；

有两个值，那么 top-left 等于 bottom-right，并且取第一个值；top-right 等于 bottom-left，并且取第二个值；

有三个值，其中第一个值是设置top-left;而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right；

有四个值，其中第一个值是设置 top-left 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left。

---

2.border-color 属性:

大家看看下面的图：

代码如下：

.box4 {
        width: 50px; 
        height: 50px; 
        display: block;
        background: #f00;
        border: 100px solid transparent;
        border-top-color:#edde78;
        border-bottom-color:#f01084; 
        border-left-color:#3de039; 
        border-right-color:#1418c7;  
     }
<p class="box4"></p>

我这边分别定义的4个边框的颜色的，

假设我在这代码中我写三角形，该怎么写了，

你们先看看下面的图：

你们想想如果这样图你们该怎么写，思考一下！！！

假设我们先把左边框的颜色的颜色改成白色，然后在改底部的，上边的，然后得到这个样图

然后我再把

    width: 50px; 
    height: 50px; 
    改成
    width: 0; 
    height: 0; 

就得到这样子的：

整体代码如下：

    width: 0;
    height: 0;
    display: block;
    background: #f00;
    border: 100px solid transparent;
    border-top-color: #fff;
    border-bottom-color: #fff;
    border-left-color: #fff;
    border-right-color: #1418c7;

总结，时间有限先写这么写，有时间在补充，当然三角形也其他的写法的，你可以尝试看看，

相关阅读

border-radius熟悉写形状攻略

border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，没错，但是除此之外，它还可以做点别的事情。radius其实指的是边框所