用文本边框包围内容

问题描述 投票：0回答：2

我在这里想要完成的是拥有一些内容，在本例中是“不”这个词（字体大小当然足以表达这个想法），并用尤达大师的引言作为某种“边界”将其包围。

#boxContent {
  font-size: 55px;
  font-weight: normal;
}

body {
  text-align: center;
  font-size: 10px;
  font-weight: bold;
}

#bodyFormat {
  margin: 100px;
  padding: 10px;
  background-color: salmon;
  width: 250px;
  height: 125px;
}

.boxSides {
  display: inline-block;
  border: solid 2px darkGreen;
  /*height: 100px*/
}

#LeftBorder {
  transform: rotate(-90deg);
  /*margin: 40px 0 0 0;*/
}

#RightBorder {
  transform: rotate(90deg);
  /*margin: -80px 0 0 100px;*/
}

#bottomBorder {
  transform: rotate(180deg);
}
<div id=bodyFormat>
  <!--Close Box top-->
  <div>DO OR DO NOT</div>

  <!--Close Box left side-->
  <span class="boxSides" id="LeftBorder">BE WITH YOU</span>

  <!--Inside Box-->
  <span id="boxContent">NO</span>

  <!--Close Box right side-->
  <span class="boxSides" id="RightBorder">MAY THE FORCE</span>

  <!--Close Box bottom-->
  <div id="bottomBorder">THERE IS NO TRY</div>
</div>

```

这是我得到的最接近的，但你可以猜到它还不够接近。

This is how it looks (if you wonder, yes it's cut out)

我希望它是真正紧密的，类似边框的，或多或少在这个尺寸（字体大小）

我已经尝试将属性从 

<span>
更改为 
<div>
到 
<p>
，显示从块、内联柔性/网格/块来回更改。就像来回更改填充和边距值一样。其他每个星座都让我遇到这样的事情：

Doesn't look bad but not what I want for now.

我在搜索中唯一发现的是： 如何用文字创建边框

这个答案： https://codepen.io/mrigankvallabh/pen/LYNYoMq

但首先，我真的不明白代码中发生了什么（如果有人足够渴望，请随意解释:) 其次，我确实理解的部分表明这是针对这个特定问题的解决方案。纸张周围有边框，方向是朝外，而不是朝内。

我也读过有关字段集和图例的内容，以及将绝对值上的文本块移动到背景不断变化的边框上，但没有看到一种可以实现此目的的方法，因为内容周围不应有一条线。

还有另一件事（不是那么重要，但仍然如此）。出于好奇，我为侧面写了实心边框，因为背景（#bodyFormat - 鲑鱼）似乎与转换（旋转）之前的文本一样宽，如果你明白我的意思的话。但看起来边框文本周围的框是围绕内容塑造的，不消耗旋转空间。更改边距或宽度只会再次打乱所有内容。 （对于宽度，如果您也想知道，它会精确地更改为 218px）。如何去除多余的背景？

html css border
2个回答
0
投票

您似乎正在尝试使用 CSS 转换和样式在文本周围创建类似边框的效果。我了解您希望为您的内容实现特定的视觉外观。您正在寻找的解决方案可能涉及 CSS 样式和属性的组合来创建所需的效果。

这是代码的修改版本，尝试使用转换和样式在文本“NO”周围实现类似边框的效果：

试试这个：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="styles/style.css"/>
  <script type="javascript" src="scripts/script.js"></script>
  <title>No Try, Do</title>
  <style>
    body {
      text-align: center;
      font-size: 10px;
      font-weight: bold;
    }

    #bodyFormat {
      margin: 100px;
      padding: 10px;
      background-color: salmon;
      width: 250px;
      height: 125px;
      position: relative;
    }

    #boxContent {
      font-size: 55px;
      font-weight: normal;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .borderText {
      display: inline-block;
      font-size: 10px;
      font-weight: bold;
      border: 2px solid darkGreen;
      padding: 5px;
      transform: rotate(-90deg);
      position: absolute;
    }

    .borderText.top {
      top: -12px;
      left: 50%;
      transform-origin: center bottom;
      transform: translateX(-50%) rotate(0);
    }

    .borderText.right {
      top: 50%;
      left: 100%;
      transform-origin: center left;
      transform: translateY(-50%) rotate(90deg);
    }

    .borderText.bottom {
      bottom: -12px;
      left: 50%;
      transform-origin: center top;
      transform: translateX(-50%) rotate(180deg);
    }

    .borderText.left {
      top: 50%;
      left: -12px;
      transform-origin: center right;
      transform: translateY(-50%) rotate(-90deg);
    }
  </style>
</head>
<body>
  <div id="bodyFormat">
    <div class="borderText top">DO OR DO NOT</div>
    <div class="borderText left">BE WITH YOU</div>
    <div id="boxContent">NO</div>
    <div class="borderText right">MAY THE FORCE</div>
    <div class="borderText bottom">THERE IS NO TRY</div>
  </div>
</body>
</html>

0
投票

我能够使用 CSS 网格进行布局来实现您想要的目标，并使用位置：绝对将两侧包裹在 p 标签中并设置父级位置：相对 - 以取消父级宽度与文本长度的链接。我还设置了很多要显示的内容：flex 以使内容更容易居中，并将所有跨度更改为 div 以保持一致性。

初始网格布局： 在这些情况下，对事物进行颜色编码通常会有所帮助，以便更清楚地了解正在发生的事情。这个问题完全可以在不使用网格的情况下解决，但我发现它更容易概念化。

以下是我用 p 标签包裹侧面文本的原因的视觉效果： 正如你所看到的，整个 div 块都在旋转，脱离了网格的布局。

因此，我们将它们设为子 p 元素，将它们绝对定位，将父元素相对定位，旋转，瞧：

（我还应该指出，此时我稍微改变了网格布局，使顶部和底部仅在中心和左右全高，但这是相同的想法。）

现在我们只需调整 bodyFormat div 的大小来调整 p 元素的左右距离，一切都应该就位：

我还应该注意到，我更改了一些字体大小，以使所有内容都足够大，可以使用并帮助它们更好地组合在一起，但请随意调整所有这些数字，直到它看起来像您想要的那样。该结构应该能够承受。我将颜色编码注释掉了，这应该会有所帮助。

#boxContent {
  font-size: 150px;
  font-weight: normal;
/*   background-color: green; */
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  height: .75em;
}

body {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

#bodyFormat {
  padding: 10px;
  background-color: salmon;
  width: 13em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

.boxSides {
  display: flex;
  align-items: center;
  position: relative;
}

#LeftBorder {
  grid-column: 1;
  grid-row: 1 / 4;
/*   background-color: blue; */
}

#LeftBorder p {
  transform: rotate(-90deg);
/*   background: white; */
  position: absolute;
  width: 9em;
  left: -4em;
}

#RightBorder p {
  transform: rotate(90deg);
/*   background: white; */
  position: absolute;
  width: 9em;
  right: -4em;
}

#RightBorder {
  grid-column: 3;
  grid-row: 1 / 4;
/*   background-color: red; */
}
.topBorder {
  grid-column: 2;
  grid-row: 1;
/*   background-color: orange; */
}
#bottomBorder {
  grid-column: 2;
  grid-row: 3;
/*   background-color: yellow; */
}
<div id=bodyFormat>
  <!--Close Box top-->
  <div class="topBorder">DO OR DO NOT</div>

  <!--Close Box left side-->
  <div class="boxSides" id="LeftBorder"><p>BE WITH YOU</p></div>

  <!--Inside Box-->
  <div id="boxContent">NO</div>

  <!--Close Box right side-->
  <div class="boxSides" id="RightBorder"><p>MAY THE FORCE</p></div>

  <!--Close Box bottom-->
  <div id="bottomBorder">THERE IS NO TRY</div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.