如何仅显示角边框？
Posted
技术标签:
【中文标题】如何仅显示角边框？【英文标题】：How can I show only corner borders? 【发布时间】：2013-01-01 12:00:27 【问题描述】：我想知道是否可以在 CSS 中制作边框但仅用于角。像这样的：
**** ****
* *
* *
CONTENT
* *
* *
**** ****
【问题讨论】：
看看border-image:css-tricks.com/understanding-border-image
从 SO ***.com/questions/1011508/…试试这个
【参考方案1】：
到目前为止没有人提到的一个选项是使用多个box-shadow 来模拟这种类型的边框。每个角落都需要一个 box-shadow：
div
width: 150px;
height: 150px;
padding: 10px;
box-shadow:
-80px -80px 0 -70px black,
80px -80px 0 -70px black,
-80px 80px 0 -70px black,
80px 80px 0 -70px black;
<div>I am a box with borders only in the corners.</div>它的工作原理是有四个阴影（左上、右上、右下、左下）并使用负扩展半径减小它们的大小（模糊半径将保持为零）：
box-shadow: offset-x offset-y [blur-radius] [spread-radius] [color];
虽然这是可行的（即使在 IE 上！）并且它是一种简单的方法（不需要额外的元素或伪元素），但它有两个很大的不足：
-
您需要知道盒子的大小才能相应地调整 box-shadow 的值（或者至少有一个大致的想法来调整阴影的值，因为它们不接受百分比）。
角不会完全成正方形。相反，它们将与盒子大小成正比。这可以通过使用 8 个阴影而不是 4 个来避免，但是那样事情就会变得一团糟。
最后，使用背景渐变可能是更好的选择，并且可以提供“更多控制”，因为它都在框内。它可以通过 4 个线性梯度来实现（一些答案表示 8 个）：
div
--size: 32px;
width: 100px;
height: 100px;
padding: 10px;
background:
linear-gradient(blue var(--size), transparent 0 calc(100% - var(--size)), blue 0) 0 0 / 4px 100%,
linear-gradient(blue var(--size), transparent 0 calc(100% - var(--size)), blue 0) 100% 0 / 4px 100%,
linear-gradient(to right, blue var(--size), transparent 0 calc(100% - var(--size)), blue 0) 0 0 / 100% 4px,
linear-gradient(to right, blue var(--size), transparent 0 calc(100% - var(--size)), blue 0) 0 100% / 100% 4px
;
background-repeat: no-repeat;
<div>I am a box with borders only in the corners.</div>【讨论】：
【参考方案2】：这是一个使用渐变和 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 */
--g:#0000 90deg,var(--c) 0;
background:
conic-gradient(from 90deg at top var(--b) left var(--b),var(--g)) 0 0,
conic-gradient(from 180deg at top var(--b) right var(--b),var(--g)) 100% 0,
conic-gradient(from 0deg at bottom var(--b) left var(--b),var(--g)) 0 100%,
conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--g)) 100% 100%;
background-size:var(--w) var(--w);
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);
--g:#0000 90deg,#000 0;
-webkit-mask:
conic-gradient(from 90deg at top var(--b) left var(--b),var(--g)) 0 0,
conic-gradient(from 180deg at top var(--b) right var(--b),var(--g)) 100% 0,
conic-gradient(from 0deg at bottom var(--b) left var(--b),var(--g)) 0 100%,
conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--g)) 100% 100%;
-webkit-mask-size:var(--w) var(--w);
background-origin:border-box;
-webkit-mask-repeat:no-repeat;
mask:
conic-gradient(from 90deg at top var(--b) left var(--b),var(--g)) 0 0,
conic-gradient(from 180deg at top var(--b) right var(--b),var(--g)) 100% 0,
conic-gradient(from 0deg at bottom var(--b) left var(--b),var(--g)) 0 100%,
conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--g)) 100% 100%;
mask-size:var(--w) var(--w);
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 0 0) top /calc(100% - 2*var(--w)) var(--b),
linear-gradient(#fff 0 0) bottom/calc(100% - 2*var(--w)) var(--b),
linear-gradient(#fff 0 0) left /var(--b) calc(100% - 2*var(--w)),
linear-gradient(#fff 0 0) right / var(--b) calc(100% - 2*var(--w)),
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:destination-out;
-webkit-mask-repeat:no-repeat;
mask:
linear-gradient(#fff 0 0) top /calc(100% - 2*var(--w)) var(--b),
linear-gradient(#fff 0 0) bottom/calc(100% - 2*var(--w)) var(--b),
linear-gradient(#fff 0 0) left /var(--b) calc(100% - 2*var(--w)),
linear-gradient(#fff 0 0) right / var(--b) calc(100% - 2*var(--w)),
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
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>【讨论】：
我喜欢这个。它没有固执己见，并接受参数。太棒了！ 我从来没有想过使用内联样式设置变量，这真的很酷！ 太棒了！必须是最佳答案【参考方案3】：.border_coners
background:
linear-gradient(to right, #e5e5e5 1px, transparent 1px) 0 0,
linear-gradient(to right, #e5e5e5 1px, transparent 1px) 0 100%,
linear-gradient(to left, #e5e5e5 1px, transparent 1px) 100% 0,
linear-gradient(to left, #e5e5e5 1px, transparent 1px) 100% 100%,
linear-gradient(to bottom, #e5e5e5 1px, transparent 1px) 0 0,
linear-gradient(to bottom, #e5e5e5 1px, transparent 1px) 100% 0,
linear-gradient(to top, #e5e5e5 1px, transparent 1px) 0 100%,
linear-gradient(to top, #e5e5e5 1px, transparent 1px) 100% 100%;
background-repeat: no-repeat;
background-size: 50px 50px;
【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。【参考方案4】：您绝对可以定位四个<div>s，每个角落一个，每个都有适当的两个边框。
.corners
position: relative;
width: 50px; /* for demo purposes */
padding: 10px;
.top, .bottom
position: absolute;
width: 20px;
height: 20px;
pointer-events: none;
.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;
<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 参数：pointer-events:none;保持角落 div 后面的内容处于活动状态。【参考方案5】：剪辑路径
在彼此之上使用两个 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>【讨论】：
【参考方案6】：我采纳了 Majid Laissi 的回答，并修改为更易于理解、简单且易于修改。
img
width:70px;
height:70px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
.custom-corners
position: relative;
width: 150px;
height: 150px;
background-color: white;
border: 1px solid black;
.custom-corners:before
content: '';
position: absolute;
top: -1px;
left: -1px;
border: 1px solid #fff;
height: 100%;
width: 100%;
border-radius: 10%;
.custom-corners:after
content: '';
position: absolute;
bottom: -1px;
right: -1px;
border: 1px solid #fff;
height: 100%;
width: 100%;
border-radius: 10%;
<div class="custom-corners">
<img src="https://cdn.logo.com/hotlink-ok/logo-social-sq.png" >
</div>【讨论】：
【参考方案7】：我调整了边框半径的方法，但我不想使用绝对定位或必须知道内容的大小。
幸运的是，在各个方向设置负边距提供了我们需要的一切：
.corner-borders
border: 1px solid #ccc;
.corner-borders-reveal
border-radius: 20%; /* or any other size */
border: 1px solid white;
margin: -1px;
padding: 4px;
【讨论】：
【参考方案8】：我喜欢@Tims 方法，但它迫使我为框设置背景颜色，这是我不想要的，因为我将焦点放在背景图像对象上。 在我的例子中，我也只需要 2 条边，这使得它的结构可以稍微不同。
因此，我对其进行了一些不同的构建，使其更加灵活，并且仍然适用于所有浏览器。
如果您需要 4 个角，则该解决方案不起作用，只是想将其留在这里以供将来的搜索者使用。
:root
--border-width: 5px;
--corner-size: 20px;
--border-color: red;
.box-corners
position:relative;
.box-corners::before,
.box-corners::after
content: "";
position: absolute;
width:var(--corner-size);
height:var(--corner-size);
border:var(--border-width) solid var(--border-color);
.box-corners::before
left: 0;
top: 0;
border-bottom:none;
border-right:none;
.box-corners::after
bottom: 0;
right: 0;
border-left:none;
border-top:none;
/* ############## THIS IS JUST OPTIONAL FOR THE HOVER EFFECT ############# */
.box-corners
transition:background-color 0.3s ease-in-out;
.box-corners:hover
background:rgba(0, 0, 0, 0.5)!important;
.box-corners::before,
.box-corners::after
box-sizing:border-box;
transition:width 0.3s ease-in-out, height 0.3s ease-in-out;
.box-corners:hover::before,
.box-corners:hover::after
width:100%;
height:100%;
<div class="box-corners" style="width:300px;height:300px;background:#f7f7f7;" />悬停效果
您只需要 css 代码的第一部分就可以使边缘工作。 第二部分只是允许轻松添加一个漂亮的悬停效果，如果你不需要它，你也可以删除它。
没有 CSS 变量和 Sass
如果您不想使用 css 变量，您可以将变量替换为硬编码值。 如果你想用它制作一个 sass mixin，只需将它包装在一个 @mixin 调用中并将 vars 替换为 sass 变量。
【讨论】：
【参考方案9】：您可以使用多个线性渐变作为背景图像来实现。
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>【讨论】：
谢谢你，这很好，但他没有显示在打印预览中，为什么？你能帮帮我吗 没关系，我找到了解决方案：-webkit-print-color-adjust:exact!important; 我能想到的唯一缺点是这些行在元素内部，因此不能作为例如打印标记 UPD：解决方案是将这些背景应用于绝对定位的::before 伪元素。完美运行！【参考方案10】：
我认为最好的解决方案是伪元素方法。漂亮干净，不会用（太多）额外元素污染 html。
我使用上面的代码创建了这个 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;
那么你可以这样使用它：
html:
<div class="border">
<div class="content">
Content
</div>
</div>
SCSS
.border
@include corner-borders;
.content
position: relative;
z-index: 1;
您需要其中的 z-index 和相对位置，以便内容位于伪元素之上。
我在这里做了一个codepen演示：http://codepen.io/timrross/pen/XMwVbV
【讨论】：
【参考方案11】：假设<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
这是Fiddle
【讨论】：
不错！一个限制是#content>:first-child 不能有 position: relative 虽然......【参考方案12】：
这是我最近所做的，内容垂直和水平居中。
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">
© Copyright 2015 - Company name<br /><br />
St Winifrids St,<br />
The Saints, Harrogate HG1 5PZ, UK<br />
</div>
</div>
</div>
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
【讨论】：
【参考方案13】：SVG
如果您现在想开始使用向量以实现出色的响应能力，这是另一个不错的选择。
<svg viewBox="0 0 100 100" >
<path d="M25,2 L2,2 L2,25" fill="none" stroke="black" stroke- />
<path d="M2,75 L2,98 L25,98" fill="none" stroke="black" stroke- />
<path d="M75,98 L98,98 L98,75" fill="none" stroke="black" stroke- />
<path d="M98,25 L98,2 L75,2" fill="none" stroke="black" stroke- />
</svg>SVG 是一个很棒的工具。在这种情况下使用 SVG 的一些优点是：
曲线控制 填充控制（不透明度、颜色） 描边控制（宽度、不透明度、颜色） 代码量 是时候建立和保持形状了 可扩展 没有 HTTP 请求（如果像示例中那样使用内联）浏览器支持可追溯到 Internet Explorer 9。有关详细信息，请参阅 canIuse。
【讨论】：
如何将内容放入该框中？ 我喜欢这个，因为它最灵活。例如，您可以使用stroke-linecap 和 stroke-linejoin。 @Julix，您可以将 SVG 放在 DIV 中，删除 width 和 height 属性，它会缩放到大小。为了我的使用，我添加了一个负边距，所以它在父 div 之外。【参考方案14】：
这里有几种方法可以不使用任何额外的伪/真实元素来创建这种效果。需要注意的一点是，这两种方法都只适用于现代浏览器，因为它们使用 CSS3 属性。
使用 border-image：border-image 属性可以很容易地创建这样的效果。方法如下：
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>优点：
不需要额外的元素（伪元素或真实元素），这意味着标记更简洁，伪元素可用于其他需求。 反应灵敏。也就是说，即使容器的尺寸发生变化，浏览器也会调整边框。缺点：
Relatively lower browser support。如果需要 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>优点：
不需要额外的元素（伪元素或真实元素），这意味着标记更简洁，伪元素可用于其他需求。由于渐变中颜色的宽度是固定的，因此具有合理的响应性。如果边框虚线的宽度需要根据容器的尺寸进行更改，那么我们可以将渐变中的像素值更改为百分比（还有一些小的更改），如下面的 sn-p。
.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>缺点：
Relatively better browser support。如果需要 IE9- 支持，那么这是不行的。 如果使用基于百分比的渐变，那么与border-image 提到的矩形相同的缺点也将适用于此。
【讨论】：
【参考方案15】：我发现了这个问题，但是我对border-radius的方法并不满意：因为我使用了更粗的边框，所以效果并没有我想要的那么好。我设法创建了另一个解决方案，没有图像，也没有任何额外的标记：
.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;
这是一个带有此示例的 JSFiddle：https://jsfiddle.net/t6dbmq3e/ 希望对您有所帮助。
【讨论】：
如果你把它放在图片上就没用了 - 白色是一种颜色。【参考方案16】：这是上述答案的修改版本，该版本具有相对定位的父级和绝对定位的子级，因此我们可以添加悬停效果。
http://jsfiddle.net/3jo5btxd/
HTML:
<div id="div1"><div id="div2"><img src="http://placekitten.com/g/82/82"></div></div>
CSS:
#div1
position: relative;
height: 100px;
width: 100px;
background-color: white;
border: 1px solid transparent;
#div2
position: absolute;
top: -2px;
left: -2px;
height: 84px;
width: 84px;
background-color: #FFF;
border-radius: 15px;
padding: 10px;
#div1:hover
border: 1px solid red;
【讨论】：
【参考方案17】：我会使用重叠的 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/
【讨论】：
聪明的方法，我用伪元素改进了解决方案，以最小化标记并使其响应：jsfiddle.net/webtiki/y3EfP/147。要单独设置每个“角落”的样式，您可以看看这个答案：***.com/a/24453271/1811992 @web-tiki 我不确定“响应式”到底是什么意思，但该解决方案不是很兼容跨浏览器。大多数浏览器在放大/缩小时都会出现问题。 IE11 从一开始就显示灰色边框。 Aynway 不错的解决方案。 @Kyborek 这在缩放时看起来更好：jsfiddle.net/webtiki/y3EfP/161 尚未在 IE 中测试，但它也应该可以正常工作 这个方案有个问题，边框尺寸越大圆角越明显。 我知道这是一个旧线程，但我只是在做类似的事情，这个答案对我有帮助，但这是一个改进的线程，所以边框不是圆角jsfiddle.net/y3EfP/463【参考方案18】：这是你的照片：
HTML：
<div class="shell">
<div class="top">
<div class="clear">
<div class="left">
****
</div>
<div class="right">
****
</div>
</div>
<div class="clear">
<div class="left">
*
</div>
<div class="right">
*
</div>
</div>
<div class="clear">
<div class="left">
*
</div>
<div class="right">
*
</div>
</div>
</div>
<div class="content">
<p>CONTENT</p>
</div>
<div class="bottom">
<div class="clear">
<div class="left">
*
</div>
<div class="right">
*
</div>
</div>
<div class="clear">
<div class="left">
*
</div>
<div class="right">
*
</div>
</div>
<div class="clear">
<div class="left">
****
</div>
<div class="right">
****
</div>
</div>
</div>
和 CSS：
.shell width: 200px;
.left float:left;
.rightfloat:right;
.clear clear: both; line-height: 10px;
.content line-height: 10px; text-align: center;
【讨论】：
【参考方案19】：没有干净的 css 方法可以只给角落一个边框，但你可以尝试模仿效果。可能是这样的：http://jsfiddle.net/RLG4z/
<div id="corners">
<div id="content">
content
</div>
</div>
#corners
width: 200px;
height: 50px;
border-radius: 10px;
background-color: red;
margin: 10px;
#content
background-color: white;
border-radius: 15px;
height: 30px;
padding: 10px;
由于边框半径的不同，底层div的背景颜色呈现出低谷，在边角处呈现出边框的效果。
我个人认为我会使用背景图像来实现这一点，以便更好地控制结果。
【讨论】：
【参考方案20】：好吧，因为我在 CSS 中很烂，我想我自己无法做到，但我做到了，而且似乎可行：
<div id="half" style="position:absolute; top:0; left:0; width:30px; height:30px; overflow:visible; border-top:3px solid #F00; border-left:3px solid #06F;"></div>
<div id="half" style="position:absolute; bottom:0; right:0; width:30px; height:30px; overflow:visible; border-bottom:3px solid #F00; border-right:3px solid #06F;"></div>
它似乎正在工作 ;-) 抱歉打扰并感谢您的帮助。
【讨论】：
以上是关于如何仅显示角边框？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 PySide2 中添加边框或设置透明 QLayout？