如何使这个图像成为边框？

Question

我正在制作一个弹出框，我有一个自定义边框，但我无法弄清楚如何正确插入代码。

以下是方框的代码：

.popup_block{
display: none; /*--hidden by default--*/
background: #ffffff;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -5px -5px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}`

<div id="02" class="popup_block">

<Center> text goes here
</center></div>

以下是边框： 有没有办法让我把它放在弹出框的顶部或什么的？内部是透明的，所以将它放在上面会起作用，我想。除非有更简单的方法。

Answer 1

您还可以使用border-image并最终从包装器中固定位置。

＆＃13;

＆＃13;

#poplayer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* might be usefull too
  z-index: XX;
  overflow:auto;  
  */
}
#popup {
  min-width: 450px;
  min-height: 150px;
  border-style: solid; 
  border-width: 47px 34px 32px 39px; 
  -moz-border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 repeat; 
  -webkit-border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 repeat; 
  -o-border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 repeat;
  border-image: url(https://66.media.tumblr.com/a9ce6cf01114a325dcba725f18816a13/tumblr_oacf5xP6wh1vr8vsio1_1280.gif) 47 34 32 39 fill repeat;
}

＆＃13;

<div id="poplayer">
  <div id="popup">
    whatever comes inside your popup
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我建议将您的弹出框包装在 div 标记中，并将自定义边框作为 background-image 放置为父 div

确保您的父 div 有一个小的，全面的 padding 并且它有点大，所以弹出框落在空白处。

您还必须在父级内部使用 position: absolute 弹出框，并使用类似于以下CSS代码的内容：

.popup_block {
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    /* Other styling properties */
}

在上面的代码中，我使用 -40% 而不是 -50% ，因为您实际上必须将它放在比确切位置稍低的位置以y轴为中心。您可能需要四处游戏并尝试确切的数字。

您的HTML应：

<div class="popup_block-wrapper"> <!-- the parent -->
    <div id="02" class="popup_block">
        <center>text goes here</center>
    </div>
</div>

父级的CSS ：

.popup_block-wrapper {
    /* Positioning */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Other styling properties */
}