CSS - 仅显示角落边框

Question

我想知道在CSS或Jquery中是否可以创建边框但仅限于角落.像这样的东西:

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

             CONTENT

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

Answer 1

我会使用重叠的div.

一个有方角.和圆角的其他(因此它不会隐藏第一个角落).

<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/

结果:

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

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

Answer 2

假设<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}

这是一个小提琴

Answer 3

这是一个使用渐变和 CSS 变量的想法，您可以在其中轻松控制边框的形状：

.box {
  --b:5px;   /* thickness of the border */
  --c:red;   /* color of the border */
  --w:20px;  /* width of border */
  

  border:var(--b) solid transparent; /* space for the border */
  background:
    linear-gradient(var(--c),var(--c)) top left,
    linear-gradient(var(--c),var(--c)) top left,
    linear-gradient(var(--c),var(--c)) bottom left,
    linear-gradient(var(--c),var(--c)) bottom left,
    linear-gradient(var(--c),var(--c)) top right,
    linear-gradient(var(--c),var(--c)) top right,
    linear-gradient(var(--c),var(--c)) bottom right,
    linear-gradient(var(--c),var(--c)) bottom right;
  background-size:var(--b) var(--w),var(--w) var(--b);
  background-origin:border-box;
  background-repeat:no-repeat;
  
  /*Irrelevant code*/  
  width:200px;
  height:100px;
  box-sizing:border-box;
  margin:5px;
  display:inline-flex;
  font-size:30px;
  justify-content:center;
  align-items:center;
  line-height:90px;
}

<div class="box">
some content
</div>

<div class="box" style="--c:blue;--w:40px;--b:2px">
some content
</div>

<div class="box" style="--c:green;--w:30%;--b:8px">
some content
</div>

<div class="box" style="--c:black;--w:50%;--b:3px">
some content
</div>

<div class="box" style="--c:purple;--w:10px;--b:10px">
some content
</div>

<div class="box" style="--c:orange;--w:calc(50% - 10px);--b:4px">
some content
</div>

如果将其与蒙版结合使用，您还可以拥有复杂的着色：

.box {
  --b:5px;   /* thickness of the border */
  --c:red;   /* color of the border */
  --w:20px;  /* width of border */
  

  padding:var(--b); /* space for the border */
  
  position:relative;
  /*Irrelevant code*/  
  width:200px;
  height:100px;
  box-sizing:border-box;
  margin:5px;
  display:inline-flex;
  font-size:30px;
  justify-content:center;
  align-items:center;
  line-height:90px;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--c,red);
  -webkit-mask:
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) bottom right,
    linear-gradient(#fff,#fff) bottom right;
  -webkit-mask-size:var(--b) var(--w),var(--w) var(--b);
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) top left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) bottom left,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) top right,
    linear-gradient(#fff,#fff) bottom right,
    linear-gradient(#fff,#fff) bottom right;
  mask-size:var(--b) var(--w),var(--w) var(--b);
  mask-repeat:no-repeat;
}

<div class="box">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(45deg,red,blue);--w:40px;--b:2px">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 10px);--w:30%;--b:8px">
some content
</div>

<div class="box" style="--c:conic-gradient(red,green,yellow);--w:50%;--b:3px">
some content
</div>

<div class="box" style="--c:purple;--w:10px;--b:10px">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(45deg,orange 0 5px,blue 5px 10px);--w:calc(50% - 10px);--b:4px">
some content
</div>

为什么不使用半径：

.box {
  --b:5px;   /* thickness of the border */
  --c:red;   /* color of the border */
  --w:20px;  /* width of border */
  --r:25px;  /* radius */
  

  padding:var(--b); /* space for the border */
  
  position:relative;
  /*Irrelevant code*/  
  width:200px;
  height:100px;
  box-sizing:border-box;
  margin:5px;
  display:inline-flex;
  font-size:30px;
  justify-content:center;
  align-items:center;
  line-height:90px;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--c,red);
  padding:var(--b);
  border-radius:var(--r);
  -webkit-mask:
    linear-gradient(#fff,#fff) top   /calc(100% - 2*var(--w)) var(--b),
    linear-gradient(#fff,#fff) bottom/calc(100% - 2*var(--w)) var(--b),
    linear-gradient(#fff,#fff) left  /var(--b) calc(100% - 2*var(--w)),
    linear-gradient(#fff,#fff) right / var(--b) calc(100% - 2*var(--w)),
    linear-gradient(#fff,#fff) content-box,
    linear-gradient(#fff,#fff);
  -webkit-mask-composite:destination-out;
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(#fff,#fff) top   /calc(100% - 2*var(--w)) var(--b),
    linear-gradient(#fff,#fff) bottom/calc(100% - 2*var(--w)) var(--b),
    linear-gradient(#fff,#fff) left  /var(--b) calc(100% - 2*var(--w)),
    linear-gradient(#fff,#fff) right / var(--b) calc(100% - 2*var(--w)),
    linear-gradient(#fff,#fff) content-box,
    linear-gradient(#fff,#fff);
  mask-composite:exclude;
  mask-repeat:no-repeat;
}

<div class="box">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(45deg,red,blue);--w:40px;--b:2px;--r:40px;">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 10px);--w:30%;--b:8px">
some content
</div>

<div class="box" style="--c:conic-gradient(red,green,yellow);--w:50%;--b:3px">
some content
</div>

<div class="box" style="--c:purple;--w:10px;--b:10px;--r:0px">
some content
</div>

<div class="box" style="--c:repeating-linear-gradient(45deg,orange 0 5px,blue 5px 10px);--w:calc(50% - 10px);--b:4px;--r:10px">
some content
</div>

Answer 4

SVG

如果您现在想要开始使用向量以实现出色的响应能力,这是另一个很好的选择.

<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是一个很好的工具.在这种情况下使用SVG的一些优点是:

• 曲线控制
• 填充控制(不透明度,颜色)
• 行程控制(宽度,不透明度,颜色)
• 代码量
• 是时候建立和保持形状了
• 可扩展
• 没有HTTP请求(如果在示例中使用内联)

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

Answer 5

以下是一些创建此效果的方法,而不使用任何额外的伪/实元素.需要注意的是,这两种方法都只适用于现代浏览器,因为它们使用CSS3属性.

使用 border-image:该border-image属性使创建此类效果变得非常容易.方法如下:

• 创建一个透明的图像,这里的边框就像这里一样.
• 将此图像设置为,border-image-source并让浏览器处理其余部分:)由于border-image-repeatis 的默认值,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>

好处:

• 不需要额外的元素(伪或真),这意味着更少的混乱标记,伪元素可以用于其他需要.
• 反应灵敏.即使容器的尺寸发生变化,浏览器也会调整边框.

缺点:

• 相对较低的浏览器支持.如果需要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>

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

• 创建四个linear-gradient图像(两个用于顶部,底部,两个用于左,右).这些渐变将以所需的颜色开始,并继续为该颜色提供与边框图像的宽度/高度一样多的像素.之后它应该是透明的.
• 对于顶部和底部边框,渐变的方向应该是to right.对于左右边界,它应该是to bottom.
• 该background-size值确定边框的粗细.对于顶部和底部边框,渐变图像的大小在X轴上为100%,在Y轴上为5px(厚度).对于左右边框,尺寸在X轴上为5px(厚度),在Y轴上为100%.
• 该background-repeat应设置repeat-x在顶部,底部边框和repeat-y左,右边界.
• 根据background-position需要,在X或Y轴上设置为(-1*渐变颜色大小的一半).这是为了使一半的彩色区域出现在元素的一侧,而另一半出现在另一侧(因为渐变是重复的).

.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>

好处:

• 不需要额外的元素(伪或真),这意味着更少的混乱标记,伪元素可以用于其他需要.

• 由于渐变中颜色的宽度是固定的,因此具有合理的响应性.如果边框破折号的宽度需要根据容器的尺寸进行更改,那么我们可以将渐变中的像素值更改为百分比(稍微更改一些),如下面的代码段所示.

  .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>

缺点:

• 相对更好的浏览器支持.如果需要IE9支持,那么这是不行的.
• 如果使用基于百分比的梯度,那么所提到的矩形的相同缺点border-image也适用于此.

Answer 6

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

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

  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>

Answer 7

你绝对可以定位四个<div>,每个角落一个,每个都有适当的两个边框.

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

.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;
}

Answer 8

夹路径

使用两个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>

两个伪元素

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

.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>