HTML自定义框架

问题描述

大家好，我希望为电子邮件模板实现以下目标。

任何人都可以帮忙。我一直在尝试使用边界半径，但似乎不起作用。

感谢帮助！ 预先感谢。

解决方法

*{
  box-sizing: border-box;
}
.box {
  display: inline-flex;
  width: 200px;
  height: 200px;
  padding: 20px;
  justify-content: center;
  align-items: center;
  position: relative;
}
.box::before{
  content: '';
  width:50%;
  height: 50%;
  position: absolute;
  border-top: 2px solid black;
  border-left: 2px solid black;
  top:0;
  left:0;
}

.box::after{
  content: '';
  width:50%;
  height: 50%;
  position: absolute;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  bottom:0;
  right:0;
}

<div class="box">
Some Text Here<br>
Some Text Here<br>
Some Text Here<br>
Some Text Here<br>
Some Text Here<br>
Some Text Here<br>
Some Text Here<br>
</div>

,

问题已经在这里回答：Any way to limit border length?

但是我使用了边框宽度，并使用了::before和::after

.mainwrapper{
  text-align:center;
  padding:10px;
  margin:auto;
  position:relative;
  width:250px;
}
.mainwrapper:before,.mainwrapper:after{
  position: absolute;
  width: 50px;
  height: 50px;
  border-color: #111;
  border-style: solid;
  content: ' ';
}
.mainwrapper:before{
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}
.mainwrapper:after{
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}

<div class="mainwrapper">
    <p>something text here</p>
    <p>something text here</p>
    <p>something text here</p>
    <p>something text here</p>
    <p>something text here</p>
    <p>something text here</p>
</div>