CSS-只显示角边框

Question

CSS-只显示角边框  我想知道是否可以在CSS或jQuery中设置边框，但只用于角落。就像这样：****                         *****                               **                               *             CONTENT*                               **                               *****                         ****

Answer 1

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

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请求(如果使用内联，如示例所示)