ボーダー画像は

Question

私は営業時間

<div class="col-lg-5 col-lg-offset-2 col-sm-6"> 
<div class="content4"> 
<ul class="grid cs-style" > 
<li> 
<figure> 
<figcaption> 
<div class="time-table"> 
<h3><span class="icon icons-ornament-left"></span> <span class="light">OPENING</span> TIME <span class="icon icons-ornament-right"></span></h3> 
       <div class="inner-bg js--timetable"> 
       <dl class="week-day" data-day="1"> 
       <dt>Monday</dt> 
       <dd>9:00-18:00</dd> 
       </dl> 
       <dl class="week-day light-bg" data-day="2"> 
       <dt>Tuesday</dt> 
       <dd>9:00-18:00</dd> 
       </dl> 
       <dl class="week-day" data-day="3"> 
       <dt>Wednesday</dt> 
       <dd>8:00-18:00</dd> 
       </dl> 
       <dl class="week-day light-bg" data-day="4"> 
       <dt>Thursday</dt> 
       <dd>9:00-18:00</dd> 
       </dl> 
       <dl class="week-day" data-day="5"> 
       <dt>Friday</dt> 
       <dd>9:00-18:00</dd> 
       </dl> 
       <dl class="week-day light-bg" data-day="6"> 
       <dt>Saturday</dt> 
       <dd>9:00-18:00</dd> 
       </dl> 
       <dl class="week-day closed" data-day="0"> 
       <dt>Sunday</dt> 
       <dd>CLOSED</dd> 
       </dl> 
       </div> 
         </figcaption> 
        </figure> 
       </li> 
      </ul> 
      </div> 
       </div> 

しかし、私ドンのリストを囲むために、このフレームを使用していた

空のフレームの画像をダウンロードしましたタグの上または周りにイメージフレームを配置する方法を知っていません。また、CSSやHTMLの属性を使ってフレームのサイズを変更してリストのまわりに正確に合わせる方法もあります。誰かが助けてください。

Answer 1

使用border-image

Border-image @ MDN

このような何か：

.time-table { 
 
    text-align: center; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    border:60px solid transparent; 
 
    border-image:url(http://www.clipartbest.com/cliparts/dc6/e6E/dc6e6E8oi.png) 80 60 60 stretch; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="col-lg-5 col-lg-offset-2 col-sm-6"><div class="time-table"> 
 
    <h3><span class="icon icons-ornament-left"></span> <span class="light">OPENING</span> TIME <span class="icon icons-ornament-right"></span></h3> 
 
    <div class="inner-bg js--timetable"> 
 
    <dl class="week-day" data-day="1"> 
 
     <dt>Monday</dt> 
 
     <dd>9:00-18:00</dd> 
 
    </dl> 
 
    <dl class="week-day light-bg" data-day="2"> 
 
     <dt>Tuesday</dt> 
 
     <dd>9:00-18:00</dd> 
 
    </dl> 
 
    <dl class="week-day" data-day="3"> 
 
     <dt>Wednesday</dt> 
 
     <dd>8:00-18:00</dd> 
 
    </dl> 
 
    <dl class="week-day light-bg" data-day="4"> 
 
     <dt>Thursday</dt> 
 
     <dd>9:00-18:00</dd> 
 
    </dl> 
 
    <dl class="week-day" data-day="5"> 
 
     <dt>Friday</dt> 
 
     <dd>9:00-18:00</dd> 
 
    </dl> 
 
    <dl class="week-day light-bg" data-day="6"> 
 
     <dt>Saturday</dt> 
 
     <dd>9:00-18:00</dd> 
 
    </dl> 
 
    <dl class="week-day closed" data-day="0"> 
 
     <dt>Sunday</dt> 
 
     <dd>CLOSED</dd> 
 
    </dl> 
 
    </div> 
 
    </div>