边框

白色实心边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 50px 180px;
            background: url(./images/lolbg.png) no-repeat;
        }
        .demo {
            width: 100px;
            height: 100px;
            border: 10px solid rgb(255, 255, 255);
            background-color: #f8b62a;
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

白色半透明边框

为了先确定白色半透明的样子，我们先把背景色注释掉：

.demo {
    width: 100px;
    height: 100px;
    border: 10px solid rgba(255, 255, 255, .5);
    /* background-color: #f8b62a; */
}

加上背景色：

？？？？？？？？why?明明我的边框设置的是白色半透明的啊？怎么回事？还好我不是老王，这点小事怎么可能难得到我？（偷偷百度了一下）于是一分钟后：

 .demo {
    width: 100px;
    height: 100px;
    border: 10px solid rgba(255, 255, 255, .5);
    background-color: #f8b62a;
    background-clip: padding-box;
}

何方神圣

我们注意到一个我们不太熟悉得css属性，background-clip，它有3个可能的值：

border-box：背景被裁剪到边框盒（默认）。
padding-box：背景被裁剪到内边距框。
content-box：背景被裁剪到内容框。

盒子模型

黄色区域就是上述的content-box，绿色+黄色区域就是padding-box，黑色border+绿色+黄色就是我们的border-box，具体看以下例子：

border-box

.demo {
    width: 100px;
    height: 100px;
    border: 10px solid rgba(255, 255, 255, .5);
    background-color: #f8b62a;
    background-clip: border-box;
    padding: 40px;
}

padding-box

.demo {
    width: 100px;
    height: 100px;
    border: 10px solid rgba(255, 255, 255, .5);
    background-color: #f8b62a;
    background-clip: padding-box;
    padding: 40px;
}

content-box

.demo {
    width: 100px;
    height: 100px;
    border: 10px solid rgba(255, 255, 255, .5);
    background-color: #f8b62a;
    background-clip: content-box;
    padding: 40px;
}