使用 CSS 创建仅显示角的自定义边框 [重复]答案

【问题标题】：Using CSS to create custom borders with just the corners showing [duplicate]使用 CSS 创建仅显示角的自定义边框 [重复]
【发布时间】：2013-07-03 14:07:15
【问题描述】：

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

我想创建 2 个矩形 div，一个带有蓝色边框，另一个带有白色边框，然后将它们覆盖，但这似乎不太优雅（例如，如果我想改变背景，它就不会很好地工作）。

有什么想法我还能做到这一点吗？

编辑：

这是 HTML：

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

.blue {

border: blue 4px solid;
etc..
}

【问题讨论】：

标签： css

【解决方案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}

【讨论】：

这很甜蜜。与我的解决方案不同，在 IE10 中工作。比其他任何东西都干净。

【解决方案2】：

.text
{
    border: 1px solid #00f;
    height: 200px;
    position: relative;
    width: 200px;
}
.text:after
{
     position:absolute;
     top: 10%;
     height: 80%;
     content: "";
     width: 99%;
     left: -3px;
     border-left: 5px solid #fff;
     border-right: 5px solid #fff;
}
.text:before
{
     position:absolute;
     left: 10%;
     height: 99%;
     content: " ";
     width: 80%;
     top: -3px;
     border-top: 5px solid #fff;
     border-bottom: 5px solid #fff;  
}

&lt;div class="text"&gt;test test gfgfgf gfg f&lt;/div&gt;

这是我的变种。

【讨论】：

【解决方案3】：

使用 CSS 渐变和多个背景可以实现类似的效果：http://jsbin.com/usegup/1/edit。但可能 SVG 背景会更适合这种情况。

【讨论】：

【解决方案4】：

你的意思是这样的吗：http://jsfiddle.net/FlameTrap/F5bC6/

HTML

<div class="text">
    <span class="corner TL"></span>
    <span class="corner TR"></span>
    <span class="corner BL"></span>
    <span class="corner BR"></span>
    <div class="text">Text</div>
</div>

CSS

.text {
    background: #fff;
    width: 300px;
    height: 200px;
    position: relative;
    z-index: 3;
}
.corner {
    position: absolute;
    background: blue;
    width: 20px;
    height: 20px;
    z-index: 2;
}
.TL {
    top: -10px;
    left: -10px
}
.TR {
    top: -10px;
    right: -10px
}
.BL {
    bottom: -10px;
    left: -10px
}
.BR {
    bottom: -10px;
    right: -10px
}

【讨论】：

【解决方案5】：

这样的事情会起作用，并且在旧版浏览器中启动时问题更少：

    <style>
.blue {
    width: 500px;
    height: 500px;
    position: relative;
}
.corner {
    position: absolute;
    border-color: blue;
    width: 30px;
    height: 30px;
}
.tl {
    top: 0;
    left: 0;
    border-top: 2px solid;
    border-left: 2px solid;
}
.tr {
    top: 0;
    right: 0;
    border-top: 2px solid;
    border-right: 2px solid;
}

.br {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid;
    border-right: 2px solid;
}

.bl {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid;
    border-left: 2px solid;
}
</style>

<div class="blue">
    <div class="tl corner"></div>
    <div class="tr corner"></div>
    <div class="bl corner"></div>
    <div class="br corner"></div>
</div>

【讨论】：