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; }