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(255,255,255,.5); background-clip: padding-box;  
    }
    .border1{
        width: 200px;
        height: 200px;
        margin-left: 100px;
        margin-bottom: 60px;
        background: yellowgreen;
        /* 重點樣式 */ box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6);
    }
    .border2{
        width: 200px;
        height: 200px;
        margin-bottom: 60px;
        /* 重點樣式 */ border: 10px solid #655; outline: 5px solid deeppink; 
    }
    .border3{
        width: 200px;
        height:50px;
        background: skyblue;
        border-radius: 10px;
        margin-left: 100px;
        /* 重點樣式 */ box-shadow: 0 0 0 10px blue; outline: 20px solid blue
    }
</style>

我是在看到laixiangran的博客時看到的感覺還不錯，保留下來，一邊以后可以拿來直接使用。

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