如何制作不规则的CSS边框 [英] How to make irregular CSS border

问题描述

我正在尝试使用CSS:

I'm trying to do this with CSS:

使用白色背景很容易，但是如果它具有背景图像，该怎么办呢?这就是我的意思:

It's easy to do with a white background, but how can I do this layout if it has a background image? This is what I mean:

我实际上是将div绝对定位在另一个内部:

I'm actually absolute positioning a div inside another:

<div class="main-div">
  <div class="main-div-overlay-text">
    SOME TEXT
  </div>
  SOME TEXT HERE
</div>

.main-div {
  position: relative;
  width: 200px;
  height: 150px;
  border: 2px solid white;
}

.main-div-overlay-text {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top:-10px;
}

推荐答案

尝试使用< fieldset> 和< legend> .

body {
  background: grey;
}
fieldset {
  border: 1px solid white;
  color: white;
  text-align: center;
  width: 200px;
}
legend {
  padding: 0 10px;
}

<fieldset>
  <legend>Title</legend>
  <p>Text</p>
</fieldset>

要在Firefox中使图例居中，请使用< legend align ="center">

To center the legend in Firefox, please use <legend align="center">

这篇关于如何制作不规则的CSS边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！