边境图像

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>