使用CSS创建仅显示拐角的自定义边框 [英] Using CSS to create custom borders with just the corners showing

问题描述

这是为您准备的CSS脑筋急转弯.我想创建一个仅在文本字段周围的拐角处的边框，如下图所示:

Here's a CSS brainteaser for you. I want to create a border with just the corners around a text field, like the image below:

我考虑过创建2个矩形div，其中一个带有蓝色边框，另一个带有白色边框，然后将它们覆盖，但这似乎不太优雅(例如，如果我想改变背景，效果将不佳).

I thought about creating 2 rectangle divs, one with blue border and the other white and then overlaying them, but this didn't seem very elegant (e.g. it wouldn't work well if I wanted to vary the background).

有什么想法我还能怎么做?

Any ideas how else I might do this?

以下是HTML:

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

.blue {

border: blue 4px solid;
etc..
}

推荐答案

使用一个div和一个用于定位的节点. http://jsfiddle.net/eCEds/2/

Using one div, and one node for targeting. 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}

这篇关于使用CSS创建仅显示拐角的自定义边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！