使用background-clip属性实现透明边框
.bordertest {
border: 30px solid
hsla(0,0%,90%,.5
);
background: #bbb
;
background-clip: padding-box
;
width:500px
;
height:300px
;
}
使用box-shadow模拟多重边框
.bordertest1 {
background: lightblue
;
box-shadow: 0 0 0 10px #000,
0 0 0 20px #888,
0 0 0 30px #aaa
;
width:300px
;
height:200px
;
position: absolute
;
top:100px
;
left:100px
;
padding: 10px
;
}
使用outline属性生成多重边框
.bordertest2{
background: lightblue
;
border: 10px solid #000
;
outline: 10px dashed #888
;
width:300px
;
height:200px
;
position: absolute
;
top:100px
;
left:500px
;
padding: 10px
;
}
outline属性结合outline-offset属性的多重边框实现缝边效果
.bordertest3{
background: lightblue
;
border: 15px solid lightblue
;
border-radius: 5px
;
outline: 3px dashed #fff
;
outline-offset: -10px
;
width:300px
;
height:200px
;
position: absolute
;
top:100px
;
left:900px
;
padding: 10px
;
}
背景色透明度渐变
background: linear-gradient(to right,
rgba(250, 241, 229, 0
), #faf1e5, #faf1e5
);
