jQuery 如何仅显示角边框？

How can I show only corner borders?

提问by pierreaurelemartin

I'm wondering if it's possible in CSS or jQuery to make a border but only for corner. Something like this:

我想知道是否可以在 CSS 或 jQuery 中制作边框但仅限于角落。像这样的东西：

****                         ****
*                               *
*                               *

             CONTENT

*                               *
*                               *
****                         ****

回答by Majid Laissi

I would use overlapping divs.

我会使用重叠的 div。

One with square corners. And the Other with rounded corner (so it doesn't hide the corners of the first one).

一种带有方角。另一个带有圆角（所以它不会隐藏第一个的角）。

<div id="div1" />
<div id="div2" />


#div1 {
  position:absolute;
  top:9px;
  left:9px;
  height:100px;
  width:100px;
  background-color:white;
  border:1px solid black;
}

#div2 {
  position:relative;
  top:-1px;
  left:-1px;
  height:102px;
  width:102px;
  background-color:white;
  border-radius: 15px;
}

http://jsfiddle.net/y3EfP/

http://jsfiddle.net/y3EfP/

Result:

结果：

---

---

An enhanced solution provided by @web-tiki:

@web-tiki 提供的增强解决方案：

http://jsfiddle.net/webtiki/y3EfP/147/

http://jsfiddle.net/webtiki/y3EfP/147/

回答by Niet the Dark Absol

Assuming <div id="content">CONTENT</div>and that CONTENTincludes at least one HTML node.

假设<div id="content">CONTENT</div>并且CONTENT至少包含一个 HTML 节点。

#content {position:relative}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
    position:absolute; content:' ';
    width:80px; height: 80px;
    border-color:red; /* or whatever colour */
    border-style:solid; /* or whatever style */
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}

Here's a Fiddle

这是一个小提琴

回答by Robert Kirsz

You can achieve that using multiple linear gradients as a background image.

您可以使用多个线性渐变作为背景图像来实现这一点。

div {
  width: 100px;
  height: 100px;

  background:
    linear-gradient(to right, black 4px, transparent 4px) 0 0,
    linear-gradient(to right, black 4px, transparent 4px) 0 100%,
    linear-gradient(to left, black 4px, transparent 4px) 100% 0,
    linear-gradient(to left, black 4px, transparent 4px) 100% 100%,
    linear-gradient(to bottom, black 4px, transparent 4px) 0 0,
    linear-gradient(to bottom, black 4px, transparent 4px) 100% 0,
    linear-gradient(to top, black 4px, transparent 4px) 0 100%,
    linear-gradient(to top, black 4px, transparent 4px) 100% 100%;

  background-repeat: no-repeat;
  background-size: 20px 20px;
}

<div></div>

回答by Stewartside

SVG

SVG

This is another great alternative if you now want to start using vectors to allow for great responsiveness.

如果您现在想开始使用向量来实现出色的响应能力，这是另一个不错的选择。

<svg viewBox="0 0 100 100" width="50px">
  <path d="M25,2 L2,2 L2,25" fill="none" stroke="black" stroke-width="3" />
  <path d="M2,75 L2,98 L25,98" fill="none" stroke="black" stroke-width="3" />
  <path d="M75,98 L98,98 L98,75" fill="none" stroke="black" stroke-width="3" />
  <path d="M98,25 L98,2 L75,2" fill="none" stroke="black" stroke-width="3" />
</svg>

SVG is a great tool to use. Some of the advantages of using SVG in this case are:

SVG 是一个很好的工具。在这种情况下使用 SVG 的一些优点是：

• Curve control
• Fill control (opacity, color)
• Stroke control (width, opacity, color)
• Amount of code
• Time to build and maintain the shape
• Scalable
• No HTTP request (if used inline like in the example)

• 曲线控制
• 填充控制（不透明度、颜色）
• 描边控制（宽度、不透明度、颜色）
• 代码量
• 时间建立和保持形状
• 可扩展
• 没有 HTTP 请求（如果像示例中那样使用内联）

---

---

Browser supportfor inline SVG goes back to Internet Explorer 9. See canIusefor more information.

浏览器对内联 SVG 的支持可以追溯到 Internet Explorer 9。有关详细信息，请参阅canIuse。

回答by Harry

Here are a couple of methods to create this effect without using any extra pseudo/real elements. One thing to note is that both these approaches would work only in modern browsers because they use CSS3 properties.

这里有几种方法可以在不使用任何额外的伪/真实元素的情况下创建这种效果。需要注意的一件事是，这两种方法仅适用于现代浏览器，因为它们使用 CSS3 属性。

Usingborder-image: The border-imageproperty makes it pretty easy to create such effects. The approach is as follows:

使用border-image：该border-image属性可以很容易地创建这样的效果。方法如下：

• Create a transparent image which has borders just in the corner like here.
• Set this image as the border-image-sourceand let the browser take care of the rest :) Since the default value for border-image-repeatis stretch, the browser would stretch the original image to fit the container even if the container becomes large.
• The value set for the border-image-widthproperty determines how thick the borders are.

• 创建一个透明的图像，它的边框就在像这里一样的角落里。
• 将此图像设置为border-image-source，让浏览器处理其余的 :) 由于 的默认值border-image-repeat是stretch，即使容器变大，浏览器也会拉伸原始图像以适应容器。
• 为该border-image-width属性设置的值决定了边框的粗细。

.bordered {
  background-color: beige;
  border-image-source: url("http://i.stack.imgur.com/s2CAw.png");
  border-image-slice: 1;
  border-image-width: 5px;
}
.square {
  height: 150px;
  width: 150px;
}
.large-square {
  height: 350px;
  width: 350px;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}

<div class='bordered square'></div>
<div class='bordered large-square'></div>

Advantages:

好处：

• Needs no extra elements (pseudo or real) which means less cluttered markup, pseudo elements can be used for other needs.
• Is reasonably responsive. That is browser will adapt the borders even if container's dimensions change.

• 不需要额外的元素（伪元素或真实元素），这意味着标记更少，伪元素可用于其他需求。
• 是合理的响应。也就是说，即使容器的尺寸发生变化，浏览器也会调整边框。

Drawbacks:

缺点：

• Relatively lower browser support. If IE10- support is needed then this is a no-go.

• Since the border image is getting stretched, if the original image's canvas is a square and the container is a rectangle then the borders would look wider at top and bottom than left and right.

  .bordered {
    background-color: beige;
    border-image-source: url("http://i.stack.imgur.com/s2CAw.png");
    border-image-slice: 2;
    border-image-width: 5px;
  }
  .small-square {
    height: 75px;
    width: 75px;
  }
  .square {
    height: 150px;
    width: 150px;
  }
  .large-square {
    height: 350px;
    width: 350px;
  }
  .rectangle {
    height: 150px;
    width: 250px;
  }
  .large-rectangle {
    height: 150px;
    width: 350px;
  }
  
  /* Just for demo */
  
  div {
    margin-bottom: 10px;
  }

  <div class='bordered small-square'></div>
  <div class='bordered square'></div>
  <div class='bordered large-square'></div>
  <div class='bordered rectangle'></div>
  <div class='bordered large-rectangle'></div>

• 浏览器支持相对较低。如果需要 IE10 支持，那么这是不行的。

• 由于边框图像被拉伸，如果原始图像的画布是正方形而容器是矩形，则边框的顶部和底部看起来会比左侧和右侧更宽。

  .bordered {
    background-color: beige;
    border-image-source: url("http://i.stack.imgur.com/s2CAw.png");
    border-image-slice: 2;
    border-image-width: 5px;
  }
  .small-square {
    height: 75px;
    width: 75px;
  }
  .square {
    height: 150px;
    width: 150px;
  }
  .large-square {
    height: 350px;
    width: 350px;
  }
  .rectangle {
    height: 150px;
    width: 250px;
  }
  .large-rectangle {
    height: 150px;
    width: 350px;
  }
  
  /* Just for demo */
  
  div {
    margin-bottom: 10px;
  }

  <div class='bordered small-square'></div>
  <div class='bordered square'></div>
  <div class='bordered large-square'></div>
  <div class='bordered rectangle'></div>
  <div class='bordered large-rectangle'></div>

---

---

Usingbackground-image: The background-imageproperty can also be used with linear-gradientimages to produce the effect. The approach is as follows:

使用background-image：该background-image属性也可以与linear-gradient图像一起使用以产生效果。方法如下：

• Create four linear-gradientimages (two for top, bottom and two for left, right). These gradients would start with required color and continue to be that color for as many pixels as the width/height of the border image. After that it should be transparent.
• For top and bottom borders, gradient's direction should be to right. For left and right borders, it should be to bottom.
• The background-sizevalue determines the thickness of the border. For top and bottom borders, the size of the gradient image would be 100% in X-axis and 5px (thickness) in Y-axis. For left and right borders, the size would 5px (thickness) in X-axis and 100% in Y-axis.
• The background-repeatshould be set to repeat-xfor the top, bottom borders and to repeat-yfor left and right borders.
• The background-positionis set to (-1 * half the size of the color in gradient) in the X or Y-axis as appropriate. This is to make half of the colored area appear on one side of the element while the other half appears on the other side (because gradient is repeating).

• 创建四个linear-gradient图像（两个用于顶部、底部和两个用于左侧、右侧）。这些渐变将从所需的颜色开始，并继续作为与边框图像的宽度/高度一样多的像素的颜色。之后它应该是透明的。
• 对于顶部和底部边框，渐变的方向应该是to right。对于左右边框，应该是to bottom.
• 该background-size值决定了边框的粗细。对于顶部和底部边框，渐变图像的大小在 X 轴为 100%，在 Y 轴为 5px（厚度）。对于左右边框，X 轴为 5px（厚度），Y 轴为 100%。
• 该background-repeat应设置repeat-x在顶部，底部边框和repeat-y左和右的边界。
• 将background-position被设置为（-1 *在渐变的颜色的一半大小）在X或Y轴为适当。这是为了让一半的彩色区域出现在元素的一侧，而另一半出现在另一侧（因为渐变是重复的）。

.bordered.square {
  height: 150px;
  width: 150px;
}
.bordered.rectangle {
  height: 150px;
  width: 250px;
}
.bordered {
  background-color: beige;
  background-image: linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px);
  background-size: 100% 5px, 100% 5px, 5px 100%, 5px 100%;
  background-position: -15px 0%, -15px 100%, 0% -15px, 100% -15px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}

<div class='bordered square'></div>
<div class='bordered rectangle'></div>

Advantages:

好处：

• Needs no extra elements (pseudo or real) which means less cluttered markup, pseudo elements can be used for other needs.

• Is reasonably responsive as the width of the color in gradient is fixed. If the width of the borders dashes need to change according to the container's dimensions then we can change the pixels value in gradient to percentage (with a few more minor changes) like in below snippet.

  .bordered.square {
    height: 150px;
    width: 150px;
  }
  .bordered.large-square {
    height: 250px;
    width: 250px;
  }
  .bordered {
    background-color: beige;
    background-image: linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%);
    background-size: 90% 5px, 90% 5px, 5px 90%, 5px 90%;
    background-position: 0% 0%, 0% 100%, 0% 0%, 100% 0%;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  }
  
  /* Just for demo */
  
  div {
    margin-bottom: 10px;
  }

  <div class='bordered square'></div>
  <div class='bordered large-square'></div>

• 不需要额外的元素（伪元素或真实元素），这意味着标记更少，伪元素可用于其他需求。

• 由于渐变颜色的宽度是固定的，因此具有合理的响应能力。如果边框短划线的宽度需要根据容器的尺寸进行更改，那么我们可以将渐变中的像素值更改为百分比（还有一些较小的更改），如下面的代码片段所示。

  .bordered.square {
    height: 150px;
    width: 150px;
  }
  .bordered.large-square {
    height: 250px;
    width: 250px;
  }
  .bordered {
    background-color: beige;
    background-image: linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%);
    background-size: 90% 5px, 90% 5px, 5px 90%, 5px 90%;
    background-position: 0% 0%, 0% 100%, 0% 0%, 100% 0%;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  }
  
  /* Just for demo */
  
  div {
    margin-bottom: 10px;
  }

  <div class='bordered square'></div>
  <div class='bordered large-square'></div>

Drawbacks:

缺点：

• Relatively better browser support. If IE9- support is needed then this is a no-go.
• If percentage based gradient is used then the same drawback with rectangles as mentioned for border-imagewould be applicable here also.

• 浏览器支持比较好。如果需要 IE9- 支持，那么这是不行的。
• 如果使用基于百分比的渐变，那么border-image这里提到的矩形的相同缺点也适用。

回答by Neil

You could absolutely position four <div>s, one in each corner, each with the appropriate two borders.

您绝对可以<div>放置四个s，每个角落一个，每个都有适当的两个边框。

HTML

HTML

<div class="corners">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom right"></div>
  <div class="bottom left"></div>
  content goes here
</div>

CSS

CSS

.corners {
  position: relative;
  width: 100px; /* for demo purposes */
  padding: 10px;
}

.top, .bottom {
  position: absolute;
  width: 10px;
  height: 10px;
}

.top {
  top: 0;
  border-top: 1px solid;
}

.bottom {
  bottom: 0;
  border-bottom: 1px solid;
}

.left {
  left: 0;
  border-left: 1px solid;
}

.right {
  right: 0;
  border-right: 1px solid;
}

回答by Persijn

clip-path

剪辑路径

Using two div's on top of each other.
And adding a clip-path to div that in the back you can create a border like effect.

在彼此之上使用两个 div。
并为 div 添加一个剪辑路径，在后面您可以创建类似边框的效果。

.wrapper {
  display: inline-block;
  background-color: black;
  line-height: 0px;
  -webkit-clip-path: polygon(0% 100%, 30% 100%, 30% 70%, 70% 70%, 70% 100%, 100% 100%, 100% 70%, 70% 70%, 70% 30%, 100% 30%, 100% 0%, 70% 0%, 70% 30%, 30% 30%, 30% 0%, 0% 0%, 0% 30%, 30% 30%, 30% 70%, 0% 70%);
    clip-path: polygon(0% 100%, 
                             30% 100%, 
                             30% 70%, 
                             70% 70%, 
                             70% 100%, 
                             100% 100%, 
                             100% 70%, 
                             70% 70%,
                             70% 30%,
                             100% 30%,
                             100% 0%,
                             70% 0%,
                             70% 30%,
                             30% 30%,
                             30% 0%,
                             0% 0%,
                             0% 30%,
                             30% 30%,
                             30% 70%,
                             0% 70%);
}
.wrapper {} .wrapper div {
  display: inline-block;
  height: 150px;
  width: 150px;
  margin: 10px;
  background-color: white;
}

<div class="wrapper">
  <div></div>
</div>

two pseudo elements

两个伪元素

Using two large pseudo elements you can create the border effect.

使用两个大型伪元素可以创建边框效果。

.cut-border {
  position: relative;
  display: inline-block;
  border: 5px solid black;
  width: 150px;
  height: 150px;
}
.cut-border::before {
  content: "";
  position: absolute;
  height: calc(100% + 10px);
  width: 50%;
  background-color: white;
  top: -5px;
  left: 25%;
}
.cut-border::after {
  content: "";
  position: absolute;
  height: 50%;
  width: calc(100% + 10px);
  background-color: white;
  top: 25%;
  left: -5px;
}

<div class="cut-border"></div>

回答by Raphael Aleixo

I found this question, but I was not satisfied with the border-radius approach: As I was using more thick borders, the effect was not as good as I wanted to. I managed to create another solution, without images, and without any extra markup:

我发现了这个问题，但是我对边界半径方法不满意：因为我使用了更粗的边界，所以效果没有我想要的那么好。我设法创建了另一个解决方案，没有图像，也没有任何额外的标记：

    .box {
        /* fake border */
        position: relative;
        overflow: hidden;
        box-shadow: inset 0px 0px 0px 10px green;
        padding: 1em;
    }

    .box:before {
        /* this element will hide the fake border on the top and bottom */
        content:'';         
        display: block;
        position: absolute;
        border-top:10px solid white;
        border-bottom:10px solid white;
        /* height = border-width x2 */
        height:calc(100% - 20px); 
        top:0;
        /* width = size of fake-border x2 */
        width: calc(100% - 36px);
        /* left = size of fake-border */
        left:18px;
    }

    .box:after {
        /* this element will hide the fake border on the left and right */
        /* the rules for width, heigth, top and left will be the opposite of the former element */
        display: block;
        position: absolute;
        content:'';
        border-right:10px solid white;
        border-left:10px solid white;
        height:calc(100% - 36px);
        width: calc(100% - 20px);
        top:18px;
        left: 0;
    }

Here's a JSFiddle with this example: https://jsfiddle.net/t6dbmq3e/Hope it helps.

这是一个带有此示例的 JSFiddle：https://jsfiddle.net/t6dbmq3e/ 希望它有所帮助。

回答by amjgbr

Here is something that i did recently with content centred both vertically and horizontally.

这是我最近使用垂直和水平居中的内容所做的事情。

The HTML

HTML

<div class="column">
  <div class="c-frame-wrapper">
    <div class="c-frame-tl"></div>
    <div class="c-frame-tr"></div>
    <div class="c-frame-br"></div>
    <div class="c-frame-bl"></div>
    <div class="c-frame-content">
        &copy; Copyright 2015 - Company name<br /><br />
        St Winifrids St,<br />
        The Saints, Harrogate HG1 5PZ, UK<br />
    </div>
  </div>
</div>

The CSS

CSS

.c-frame-wrapper {
  width: 250px;
  height: 100px;
  font-size:11px;
  color: $dark-grey-lighten-70;
  /* center align x axis */
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.c-frame-tl {
  top: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid none none solid;
  border-color: #eb0000;
}

.c-frame-tr {
  top: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid solid none none;
  border-color: #eb0000;
}

.c-frame-br {
  bottom: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none solid solid none;
  border-color: #eb0000;
}

.c-frame-bl {
  bottom: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none none solid solid;
  border-color: #eb0000;
}

.c-frame-content {
  width:100%;
  text-align: center;
  /*center alignment x and y*/
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%,-50%); 
}

JSFiddle

JSFiddle

回答by Tim

i think the best solution is the pseudo element method. Nice and clean and doesn't pollute the html with (too many) extra elements.

我认为最好的解决方案是伪元素方法。漂亮干净，不会用（太多）额外元素污染 html。

I created this sass mixin using the code above, for a copy&paste solution:

我使用上面的代码创建了这个 sass mixin，用于复制和粘贴解决方案：

@mixin corner-borders($corner-width: 1px, $corner-size: 5px, $color-border: grey, $color-background: white) {
    position: relative;
    border: $corner-width solid $color-border;
    background-color: $color-background;

    &::before {
        content: "";
        z-index: 0;
        position: absolute;
        top: -$corner-width;
        bottom: -$corner-width;
        left: $corner-size;
        right: $corner-size;
        background-color: $color-background;
    }

    &::after {
        content: "";
        z-index: 0;
        position: absolute;
        top: $corner-size;
        bottom: $corner-size;
        left: -$corner-width;
        right: -$corner-width;
        background-color: $color-background;
    }
}

Then you can use it like this:

然后你可以像这样使用它：

html:

html：

<div class="border">
    <div class="content">
        Content
    </div>
</div>

SCSS

社会保障局

.border {
    @include corner-borders;
}

.content {
    position: relative;
    z-index: 1;
}

You need the z-index & relative position in there so the content sits on top of the pseudo elements.

您需要其中的 z-index 和相对位置，以便内容位于伪元素之上。

I made a codepen demo here: http://codepen.io/timrross/pen/XMwVbV

我在这里做了一个 codepen 演示：http://codepen.io/timrross/pen/XMwVbV