不同的Css3边框样式

Question

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

我可以使用css3制作吗？如果有人知道如何做到这一点，请帮助我。

Answer 1

这是一个非常＆＃34;硬编码＆＃34;解决方案，但我得到了一些工作。

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JSFiddle如果您想根据自己的喜好进行编辑。