div周围的边框不完整 [英] Incomplete borders around div

问题描述

我正在寻找一种方法来创建一个带边框的不完整方框，其中包含一些文本和一个纯CSS背景。这是我想达成的目标：

我最初的想法是创建基于三个形状的形状，然后相应地着色边框：

但我有点关心自适应版本 - 缩放三个形状。

解决方案

这种方法可以让你：

$ b $

• 添加任何内容，边框将适应

p>它依赖于2个绝对定位的伪元素和一个 div 。内容和边框之间的间距由div上的填充控制：

  div {position：relative; display：inline-block; padding：50px 100px; border-left：1px solid＃000; text-align：center;} div：before，div：after {content：''; position：absolute;右：50％; left：0; height：50px; border-right：1px solid＃000;} div：before {top：0; border-top：1px solid＃000;} div：after {bottom：0; border-bottom：1px solid＃000;} body {background：url（'http://i.imgur.com/3IXm5qm.jpg'）; background-size：cover;}  

 < div> < h2>这是< br /> 2行< / h2> < button>按钮< / button> < p>一些文本< / p>< / div>  

I am looking for a way to create an incomplete square with borders with some text and a background with pure css. Here is what I am trying to achieve:

My initial idea is to create the shape based on three shapes and then colorize the borders accordingly:

But I am a bit concerned about the adaptive version - scaling three shapes. So maybe a better idea, anyone?

解决方案

This approach allows you to:

• add any content and the borders will adapt around it regardless of height or width of the content
• support transparent background and can be displayed over an image or non plain colors
• doesn't add any unsemantic elements

It relies on 2 absolutely positioned pseudo elements and one div. The spacing between the content and the borders is controlled by the padding on the div :

div{
  position:relative;
  display:inline-block;
  padding:50px 100px;
  border-left:1px solid #000;
  text-align:center;
}
div:before, div:after{
  content:'';
  position:absolute;
  right:50%; left:0;
  height:50px;
  border-right:1px solid #000;
}
div:before{
  top:0;
  border-top:1px solid #000;
}
div:after{
  bottom:0;
  border-bottom:1px solid #000;
}
body{background:url('http://i.imgur.com/3IXm5qm.jpg');background-size:cover;}

<div>
  <h2>This is a very long title on<br/> 2 lines</h2>
  <button>Button</button>
  <p>Some text</p>
</div>

这篇关于div周围的边框不完整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！