如何创建带有文本的边框

Question

我想为 A4 尺寸的纸张创建 HTML/CSS，我可以，但是，我还想在边框上使用品牌名称运行（如下所示）。如何用文字创建边框？

Answer 1

您可以使用 CSS 的 border-image 属性。这需要对图像大小进行一些试验，但这是根据您在上面分享的未经编辑的图像制作的。

div {
  width: 595px;
  height: 842px;
  border: 40px solid transparent;
  padding: 30px;
  border-image: url(https://i.stack.imgur.com/xv03p.png) 30 round;
  box-sizing: border-box;
}

<div>
  <h1>Your content here</h1>
</div>

Answer 2

https://codepen.io/mrigankvallabh/pen/LYNYoMq

<div class="A4">
    <div id="sheet1" class="sheet padding-10mm">
      <h1 class="text-center">Heading</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate nostrum neque dolores voluptates fuga aliquam
        eos porro maxime atque quisquam, ab ullam deserunt rem excepturi libero consequatur iusto facilis quidem cupiditate
        magni amet at. Maiores, nisi, ab corporis, pariatur repellat voluptatem quod harum nobis dolorum suscipit totam odit
        enim quisquam nulla ea quas tempore tempora impedit repudiandae dolorem numquam. Iure accusamus iusto quas
        aspernatur culpa voluptas rem repellat voluptate accusantium, dolorum maiores impedit. Commodi qui sunt eaque ut
        ullam eius, nostrum, debitis placeat tempora quod blanditiis modi quasi numquam aliquam, accusantium perspiciatis
        quibusdam quas officiis. Alias provident quisquam reiciendis at iure nulla, veritatis maiores iste autem eaque non
        voluptas consequuntur. Dolorum a incidunt fugiat iusto vero excepturi corrupti, doloremque rem! Voluptas, labore.
        Quia iusto labore neque, dolorum blanditiis rerum, nemo sed adipisci doloremque alias cupiditate porro. Ducimus,
        nesciunt. Facilis asperiores porro dolor ratione, vero placeat dolorum error inventore possimus eligendi suscipit
        maiores aliquid in illo quae fugit deleniti ea tenetur velit quaerat unde impedit. Libero accusamus dolore aut
        beatae asperiores eligendi unde voluptatibus, doloremque ipsum aliquid repudiandae ea tempore nobis rem cum tenetur.
        Delectus temporibus eos doloremque, modi quas iusto facilis cumque assumenda atque ad maiores excepturi. Accusantium
        vero numquam temporibus voluptatem quis molestiae dignissimos dolorum! Accusamus distinctio autem sint incidunt
        debitis quisquam illum delectus perspiciatis, accusantium sed reiciendis, repudiandae nihil, eveniet sunt. Voluptas
        modi consequatur quia asperiores, beatae sequi atque nemo ex officia obcaecati aliquid soluta, voluptatem
        consequuntur vero magni quod, accusantium perferendis deserunt ullam laudantium. Excepturi, dolore molestias!
      </p>
      <div class="tb-text-border space-preserve" data-content="Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics">Yusen Logistics    -    Yusen Logistics         <span class="large-text">    Yusen Logistics    </span>         Yusen Logistics    -    Yusen Logistics</div>
      <div class="lr-text-border space-preserve" data-content="Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics">Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics    -    Yusen Logistics</div>
    </div>
  </div>

@page { margin: 0; size: A4;}
/* Paper Size for A4 */
div.A4               .sheet { width: 210mm; height: 296mm }
div.A4.landscape     .sheet { width: 297mm; height: 209mm }

.sheet {
  position: relative;
}

.sheet.padding-10mm {  padding: 10mm; }

/** For screen preview **/
@media screen {
  body { background: #e0e0e0 }
  .sheet {
    background: transparent;
    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
    margin: 5mm auto;
  }
}

/** Fix for Chrome issue #273306 **/
@media print {
  div.A4 { width: 210mm }
  div.A4.landscape { width: 297mm }
}

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
p {  text-align: justify; }
.text-center { text-align: center; }
.space-preserve {white-space: pre; }
.large-text { font-size: 2rem; }
.tb-text-border {
  display: block;
  font-family: 'Abril Fatface', cursive;
  color: dodgerblue;
  background-color: #fff;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  padding: 2mm 5mm;
  box-sizing: border-box;
  text-align: center;
  z-index: -2;
}

.tb-text-border::after {
  content: attr(data-content);
  display: block;
  transform: rotate(180deg);
  position: absolute;
  width: 100%;
  bottom: 0; left: 0;
  padding: 2mm 5mm;
  box-sizing: border-box;
  white-space: pre;
}

.lr-text-border {
  display: block;
  font-family: 'Abril Fatface', cursive;
  color: dodgerblue;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  padding: 8mm 2mm;
  box-sizing: border-box;
  writing-mode: vertical-rl;
  text-align: center;
  z-index: -1;
}

.lr-text-border::after {
  content: attr(data-content);
  display: block;
  transform: rotate(180deg);
  position: absolute;
  height: 100%;
  bottom: 0; left: 0;
  padding: 8mm 2mm;
  box-sizing: border-box;
}

如何创建带有文本的边框

How to create Border with text

css

border-layout