使用CSS扩展边框

Question

我一直在测试一个扩展/投影边框的想法,有几个嵌套的div,我在下面有一个工作示例.

基本上,我想要实现的是垂直和水平边框,它们延伸到包含内容的盒子之外.有点像起草的外观.如果可能的话,我希望这能完全响应.

在我的代码中,我设置了具有负边距的高度,以便获得我在视觉上寻找的效果,但看起来我的标记对于我想做的事情来说太过臃肿.它是水平响应的,但是垂直方向我只是隐藏了溢出.

这样做的另一个想法就是有4个div,每个边界侧(顶部,右侧,底部,左侧)1,然后将每个div偏移一定量以达到效果.有点像div"jiggled"群集.4个div将由父容器携带并且响应.

这可以比我在小提琴里做的更简单吗？有没有办法让它在垂直和水平方面都是灵活的(完全响应)？是否可以在每个边界侧设置可变扩展(如一侧为2px,另一侧为4px)？

没有进一步的废话,这是我到目前为止所拥有的:

body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: Helvetica, Arial, sans-serif;
  /* text-align: center; */
}

.container {
  margin: 50px auto 0;
  padding: 0;
  width: 75%;
  height: 200px;
  position: relative;
}

.box-vert {
  margin: -10px 0;
  padding: 0;
  overflow: visible;
  height: 200px;
  position: absolute;
  border: 1px solid #C5C5C5;
  border-top: none;
  border-bottom: none;
}

.box-horz {
  height: 180px;
  margin: 10px -10px;
  overflow: visible;
  border: 1px solid #C5C5C5;
  border-left: none;
  border-right: none;
  padding: 0;
}

.box-inner {
  margin: 0 10px;
  padding: 20px;
  background-color: #ECECEC;
  height: 140px;
  float: left;
  overflow: hidden;
}

.box-inner h1 {
  margin: 0 0 10px;
  text-transform: uppercase;
  font-weight: 200;
  letter-spacing: 3px;
  font-size: 30px;
  color: #009688;
}

.box-inner p {
  margin: 0;
  line-height: 1.4;
  font-size: 14px;
  color: #666;
}

<div class="container">
  <div class="box-vert">
    <div class="box-horz">
      <div class="box-inner">
        <h1>Title Text Here</h1>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以使用单个元素和背景渐变来完成此操作,如下面的代码段所示.输出是响应式的(正如您在整页视图中看到的那样),并且可以根据内容的大小进行自适应.

这个方法有点复杂,因为它是用一个元素完成的,所以这里有一个解释:

• 在所有面上的元素中添加15px的填充,以便将文本流限制到更小的区域(即,在我们要创建的边界内).
• 添加4个线性渐变背景图像(每个边框一个),并设置它们的背景尺寸,使得每个边框的厚度为1px,但其宽度/高度为100%.
• 对于顶部和底部边框,厚度/高度为1px(或我们需要的任何值),边框的宽度将与容器的宽度相同,因此background-size设置为100% 1px.
• 对于左右边框,厚度/宽度为1px,高度为容器高度的100%,因此background-size设置为1px 100%.
• 然后定位这些梯度线使得它们在父母内部处于偏移处.也就是说,顶部边框应该在y轴上偏移10px(或者我们需要的任何东西,但它应该小于填充),并且左边界应该在x轴上偏移10px.类似地,底部和右边框应该从容器的底部和右边缘偏移10px,因此该calc函数用于定位它们.
• 对于元素的背景,我们不能使用background-color这种方法的简单,因为它会填满整个div(延伸到边界之外).我们甚至无法使用背景剪辑,因为这也会剪切边框.因此,我们必须再次使用线性渐变,其尺寸小于容器的尺寸,所有侧面的填充量.因此,此渐变的背景大小将是,calc(100% - 20px) calc(100% - 20px)并且位置也应相应地偏移.
• 可以通过更改渐变的颜色来更改边框和背景颜色.

div {
  padding: 15px;
  margin-bottom: 10px;
  line-height: 1.4;
  font-size: 14px;
  color: #666;
  background: linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#ECECEC, #ECECEC);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%, calc(100% - 20px) calc(100% - 20px);
  background-position: 0px 10px, calc(100% - 10px) 0px, 0px calc(100% - 10px), 10px 0px, 10px 10px;
  background-repeat: no-repeat;
}

/* Just for demo */

h1 {
  margin: 0 0 10px;
  text-transform: uppercase;
  font-weight: 200;
  letter-spacing: 3px;
  font-size: 30px;
  color: #009688;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: Helvetica, Arial, sans-serif;
  /* text-align: center; */
}

<div>
  <h1>Title Text here</h1>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

<div>
  <h1>Title Text here</h1>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.</div>

如果您需要每侧的变量扩展,只需根据以下逻辑更改填充,背景大小和位置:

• 让我们假设你需要边框在顶部延伸6px,在右边8px,在底部延伸10px,在左边延伸12px,在边框和文本之间有4px的空间.然后使用以下逻辑设置填充.

  padding: [border-ext-top + space-between-borders-n-text]
           [border-ext-right + space-between-borders-n-text]
           [border-ext-bottom + space-between-borders-n-text]
           [border-ext-left + space-between-borders-n-text];

• 背景图像渐变(产生边框)设置为遵循相同的左上 - 左下顺序,如填充.所以,设置background-position如下.

  background-position: 0px [border-ext-top], 
                       calc(100% - [border-ext-right]) 0px, 
                       0px calc(100% - [border-ext-bottom]), 
                       [border-ext-left] 0px, 
                       [border-ext-left] [border-ext-top];

• 由于padding和background-position更改,还应更改创建内部填充的渐变的大小,以便不会溢出边框.

  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%,
                   calc(100% - [border-ext-left + border-ext-right]) calc(100% - [border-ext-top + border-ext-bottom]);

div {
  padding: 10px 12px 14px 16px;
  margin-bottom: 10px;
  line-height: 1.4;
  font-size: 14px;
  color: #666;
  background: linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#ECECEC, #ECECEC);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%, calc(100% - 20px) calc(100% - 16px);
  background-position: 0px 6px, calc(100% - 8px) 0px, 0px calc(100% - 10px), 12px 0px, 12px 6px;
  background-repeat: no-repeat;
}

/* Just for demo */

h1 {
  margin: 0 0 10px;
  text-transform: uppercase;
  font-weight: 200;
  letter-spacing: 3px;
  font-size: 30px;
  color: #009688;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: Helvetica, Arial, sans-serif;
  /* text-align: center; */
}

<div>
  <h1>Title Text here</h1>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

<div>
  <h1>Title Text here</h1>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.</div>

Answer 2

您可以使用单个元素和几个伪元素来实现此目的.下面是一个快速演示.

div {
  position: relative;
  height: 300px;
  width: 80%;
  margin: 30px;
  background: tomato;
}
div:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -30px;
  width: calc(100% + 60px);
  height: 100%;
  border-top: 2px solid cornflowerblue;
  border-bottom: 2px solid cornflowerblue;
}
div:after {
  content: "";
  position: absolute;
  left: -2px;
  top: -30px;
  height: calc(100% + 60px);
  width: 100%;
  border-left: 2px solid cornflowerblue;
  border-right: 2px solid cornflowerblue;
}

<div>
  <h4>Hello, World!</h4>
  Some Text
</div>