边框图像 Bootstrap

Question

我正在尝试使用 iphone 框架 png 作为表单的边框，但无法弄清楚。以下是 .html 和 .css 至此。正如您将看到的，我已尝试将视频作为背景图像和单独的对象。

这是我们尝试使用的框架： iPhone Frame

这是我们现在的样子（它是 w/in 超大屏幕右侧的表格）： Form Screenshot

HTML

    #phoneform {
      float: right;
      border-image: url(/assets/images/iphone-frame-white.png);
      border: 10px solid transparent;
      padding: 25px;
    }
    #iphoneframe {
      background-repeat: none;
    }
    
    #landform {
      background: white;
      width: 360px;
      padding: 40px;
      text-align: center;
      margin-top: 105px;
      margin-left: 15px;
      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <!-- Signup Form -->
      <div class="container-fluid" id="phoneform">
        <div class="row">
          <div class="col-6">
            <!-- iPhone -->
            <!-- <img src="/assets/images/iphone-frame-white.png" id="iphoneframe"> -->
            <!-- Form -->
            <div class="float hidden-sm-down" id="landform">
              <h3><strong>Sign Up</strong></h3>
              <app-landing-form></app-landing-form>
              <div class="hidden-md-up"></div>
            </div>
          </div>
        </div>
      </div>

我确信答案是 border-image，但它对我不起作用。

我想知道是否有办法将图像文件放在表单元素的顶部。

感谢您的帮助！

Answer 1

Codepen Link

#phoneform {
  float: right;
  border: 10px solid transparent;
  padding: 25px;
}

#iphoneframe {
  background-repeat: none;
}

#landform {
  background-image: url("https://i.stack.imgur.com/pY82X.png");
  width: 418px;
  height: 855px;
  padding: 40px;
  border-radius: 70px;
  text-align: center;
  margin-top: 105px;
  margin-left: 15px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

h3 {
  position: relative;
  top: 100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="phoneform">
  <div class="row">
    <div class="col-sm-6">
      <!-- iPhone -->
    </div>
    <!-- Form -->
    <div class="col-sm-4 col-sm-offset-2">
      <div class="float hidden-sm-down" id="landform">
        <h3><strong>Sign Up</strong></h3>
        <app-landing-form></app-landing-form>
        <div class="hidden-md-up"></div>
      </div>
    </div>
  </div>
</div>

你在找这样的东西吗？？

边框图像 Bootstrap

Border Image Bootstrap

forms

frame

twitter-bootstrap

border-image