这是一个CSS brainteaser为你.我想创建一个边框,只是文字字段周围的角落,如下图所示：
我想到了创建2个矩形div,一个是蓝色边框,另一个是白色,然后重叠它们,但是这似乎不是非常优雅的(例如,如果我想改变背景,那将不会很好).
有什么想法我可以做这个吗
编辑：
这是HTML：
<div class="blue white1 white">text</div>
.blue {
border: blue 4px solid;
etc..
}
解决方法
使用一个div和一个节点进行定位.
http://jsfiddle.net/eCEds/2/
HTML：
<div class="blue white1 white"><p>Text</p></div>
CSS：
.blue {position:relative;width:400px;height:300px;}
.blue:before,.blue:after,.blue>:first-child:before,.blue>:first-child:after {
position:absolute;
width:80px; height: 80px;
border-color:blue;
border-style:solid;
content: ' ';
}
.blue:before {top:0;left:0;border-width: 4px 0 0 4px}
.blue:after {top:0;right:0;border-width: 4px 4px 0 0}
.blue>:first-child:before {bottom:0;right:0;border-width: 0 4px 4px 0}
.blue>:first-child:after {bottom:0;left:0;border-width: 0 0 4px 4px}
