使用css创建描边帧效果

Question

我有一个具有这种效果的设计

我不关心字体样式或任何细节,我现在关注的是创建框架,如果可能的话,按钮也是如此.有谁知道如何在CSS中做这种效果？

这是我非常基本的html/css代码,甚至没有任何帮助.如果它更适合你,你可以完全修改它.顺便说一句,我正在使用bootstrap 3.

/******** The html *********/
    <div class="col-md-12 bg-img">
        <div>Italy has never been so close</div>
    </div>

/******** The css *********/
    .bg-img {
      display: table;
      width: 100%;
      height: 100px;
      text-align: center;
      background: #999 url("http://p1.pichost.me/i/15/1380265.jpg") no-repeat fixed center;
    }

    .bg-img div {
      display: table-cell;
      vertical-align: middle;
    width:10px;
      font-weight:700;
    }

我使用的是通用图像,因为它不应该有任何区别.这是小提琴. https://jsfiddle.net/3aL4xnr8/

Answer 1

您可以使用:after和:before伪元素执行此操作.

div {
  display: table;
  margin: 0 auto;
  width: 30%;
  padding: 20px;
  position: relative;
  height: 200px;
}

p {
  display: table-cell;
  vertical-align: middle;
  font-size: 40px;
}

div:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  border-top: 1px solid black;
  border-left: 1px solid black;
}

div:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 50%;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

button {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

<div>
  <p>Lorem ipsum dolor sit amet.</p>
  <button>Button</button>
</div>