css虚线矩形,css3内部虚线框设计

第一个使用的是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;

}