css3内部虚线框设计

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

css3内部虚线框设计

第一个使用的是border为虚线,再加上box-shadow来模拟外面的框;第二个使用的:before方法生成一个虚线框,这里注意的是生成的内容定位上下左右各为3px,确定了这个生成内容的大小,另外需要注意的是注意before内容的层级,小心覆盖了你里面的内容,你可以设置background为一个颜色,就知道层级了;第三个是使用的是border和outline方法。outline不支持单边设置,也不支持圆角,所以比起border来outline很是不足啊。

demodownload

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

demodownload

Adidas Predator Tango

如需转载,烦请注明出处:https://www.w3cplus.com/demo/386.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部