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>

在ul标记html的边界图象

1 个答案: