第一个使用的是border为虚线,再加上box-shadow来模拟外面的框;第二个使用的:before方法生成一个虚线框,这里注意的是生成的内容定位上下左右各为3px,确定了这个生成内容的大小,另外需要注意的是注意before内容的层级,小心覆盖了你里面的内容,你可以设置background为一个颜色,就知道层级了;第三个是使用的是border和outline方法。outline不支持单边设置,也不支持圆角,所以比起border来outline很是不足啊。
主要css代码为:
.inner_dashed{
text-align:left;
margin:20px auto;
width:300px;
padding:10px;
background-color:#F1F1F1;
border-radius:5px;
}
.demo1{
border:1px dashed #f00;
box-shadow:0 0 0 3px #F1F1F1;
}
.demo2{
position:relative;
}
.demo2:before{
position:absolute;
content:'';
top:3px;
right:3px;
left:3px;
bottom:3px;
border:1px dashed #f00;
border-radius:5px;
}
.demo2 p{
position:relative;
}
.demo3{
border:1px dashed #f00;
outline:3px solid #F1F1F1;
}