CSS背景与边框

一、CSS的背景颜色默认渗透到border下面

可以用虚线边框验证
.box{
margin:100px auto;
height: 100px;
width: 100px;
background-color: antiquewhite;
border: aqua 10px dashed;

    }

二、多重边框

1、box-shadow的第四个参数
box-shadow：0 0 0 10px color；
缺点是只能构造出实现边框
.box{
height: 100px;
width: 100px;
background-color: antiquewhite;
border: 20px solid rgba(20,20,20,0.1);
padding: 20px;
box-shadow: 0 0 0 10px yellow,0 0 0 15px #bfa;
}

2、outline方案
只适用于两层边框，但是样式比上一种多
.box{
margin:100px auto;
height: 100px;
width: 100px;
background-color: antiquewhite;
border: 20px solid #cfa;
outline: 20px solid aqua;
}

三、背景定位

1、默认情况下background-position是以padding-box来定位的
.box{

        margin: 30px auto;
        height: 100px;
        width: 100px;
        background-color:yellowgreen;
        border: 20px #cfa solid;
        padding: 20px;
        background-clip: content-box;
        background-image: url("../1.png");
        background-repeat: no-repeat;
        background-size: 40px 40px；
        background-position: 20px ;
        
    }

用background-origin可以设置background-position相对定位的元素,默认是padding-box，可选为border-box和content-box
下面是加设content-box的结果

边框内圆角

使用box-shadow第四个属性描边
.box{

         margin: 30px auto;
          height: 100px;
         width: 100px;
         background-color:yellowgreen;
         border-radius: 10px;
         background: tan;
         box-shadow: 0 0 0 10px goldenrod;
    }