rgba情况下：border-color和background-color颜色叠加问题。

问题描述：border-color和background-color使用rgba颜色，border颜色会进行叠加。

<style>
    div {
        width: 400px;
        height: 400px;
        border: 20px solid ;
        border-color: rgba(52, 132, 254, 0.8);
        background-color: rgba(52, 132, 254, 0.8);
    }
</style>

<div></div>

解决方法：

1. border-color设置为transparent。（适合于border和background都是rgba且相同的情况）

div {
    width: 400px;
    height: 400px;
    border: 20px solid ;
    border-color: transparent;
    background-color: rgba(52, 132, 254, 0.8);
}

2.使用background-clip，指定一个框内的背景应该从哪里开始（border-box， padding-box， content-box）。

// *推荐
div {
    width: 400px;
    height: 400px;
    border: 20px solid ;
    border-color: transparent;
    background-color: rgba(52, 132, 254, 0.8);
    -moz-background-clip: padding;     
    -webkit-background-clip: padding;  
    background-clip: padding-box;
}

参考：css-tricks.com/transparent…