css3 - 不同的CSS3边框样式

我想在这样的内容标题中添加边框样式


我可以使用CSS3制作它吗？如果有人知道如何执行此操作，请帮助我。

最佳答案

这是一个非常“硬编码”的解决方案，但是我有一些工作要做。

您必须将mainDiv设置为隐藏左边界和右边界，使其与网页上的正文颜色相同。

body {
  background-color: #fff;
}

.mainDiv {
  width: 500px;
  height: 50px;
  border: 1px solid #CCAC00;
  position: relative;
  text-align: center;
  line-height: 3em;
}

.mainDiv:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 35px;
  top: 5px;
  left: -1px;
  border: 1px solid #fff;
}

.mainDiv:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 35px;
  top: 5px;
  left: 31.2em;
  border: 1px solid #fff;
}

<div class="mainDiv">Lorem ipsum dolor sit amet</div>

JSFiddle（如果要根据自己的喜好进行编辑）。