使用CSS创建自定义边框,只显示角落

Question

这是一个CSS脑力激荡器给你.我想创建一个仅包含文本字段周围边角的边框,如下图所示:

我想创建2个矩形div,一个带蓝色边框,另一个带白色,然后覆盖它们,但这看起来并不优雅(例如,如果我想改变背景,它将无法正常工作).

任何想法我怎么可能这样做？

编辑:

这是HTML:

<div class="blue white1 white">text</div>

.blue {

border: blue 4px solid;
etc..
}

Answer 1

使用一个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}