css3实现好看的边框效果

1、html结构

<div class="box">box</div>
<br>
<div class="border1">border1</div>
<div class="border2">border2</div>
<br>
<div class="border3">border3</div>

2.对应的css样式

<style>
    .box{
        width: 200px;
        height: 100px;
        background: #fff;
         padding: 20px;
        /* 重点样式 */
        border: 20px solid rgba(,,,.);
        background-clip: padding-box;  
    }
    .border1{
        width: 200px;
        height: 200px;
        margin-left: 100px;
        margin-bottom: 60px;
        background: yellowgreen;
        /* 重点样式 */
        box-shadow:    10px #,
               15px deeppink,
             2px 5px 15px rgba(,,,.);
    }
    .border2{
        width: 200px;
        height: 200px;
        margin-bottom: 60px;
        /* 重点样式 */
        border: 10px solid #;
        outline: 5px solid deeppink;
    }
    .border3{
        width: 200px;
        height:50px;
        background: skyblue;
        border-radius: 10px;
        margin-left: 100px;
        /* 重点样式 */
        box-shadow:    10px blue;
        outline: 20px solid blue
    }
</style>

我是在看到laixiangran的博客时看到的感觉还不错，保留下来，一边以后可以拿来直接使用。

重要用到的background-clip，box-shadow，outline属性，不了解的同学可以查看W3School查看