CSS3实现多样的边框效果

<div>
你能看到半透明的边框吗？
</div>
div {
    / 关键代码 /
    border: 10px solid rgba(255,255,255,.5);
    background: white;
    background-clip: padding-box;
    / 其它样式 /
    max-width: 20em;
    padding: 2em;
    margin: 2em auto 0;
    font: 100%/1.5 sans-serif;
}

<div></div>
/ box-shadow 实现方案 /
div {
    / 关键代码 /
    box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);
    / 其它样式 /
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
}
/ border/outline 实现方案 /
div {
    / 关键代码 /
    border: 10px solid #655;
    outline: 5px solid deeppink;
    
    / 其它样式 /
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
}

<div>我有一个漂亮的内圆角</div>
div {
    outline: .6em solid #655;
    box-shadow: 0 0 0 .4em #655; / 关键代码 /
    max-width: 10em;
    border-radius: .8em;
    padding: 1em;
    margin: 1em;
    background: tan;
    font: 100%/1.5 sans-serif;
}