css3实现好看的边框效果

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查看