Question

我有一页,我希望边界有一个以上线。

h2.bord
{
border-style:inset;
border-width:8px;
border-color:green;
background-color:black;
color:white;
text-align:center;
}

This (when used) displays a border around the text. However, I want to home more than I one line in this border.

帮助?

Answer 1

a. 使用与边界和该地内 d2

Answer 2

* E/CN.6/2009/1。你正在寻找什么?

或者,如果你想要的是双重边界或多风格的边境,那么你就可以使用多套nes子,例如。

<style>
  .inset-border { border: 4px inset Black; }
  .double-border { border: 4px double Black; }
</style>

<div class="inset-border">
  <div class="double-border">
    <h2>content</h2>
  </div>
</div>

Answer 3

标准特别安全局仅以两行为界限提供支助(见@Jaimal的答复)。

如果你们比这更需要,你需要尝试:

Additional markup: ie more container elements, each with their own border.
Use :before and :after and give them a border. Done right, they should wrap around the original box and give you extra borders. Won t work in IE6 or IE7.
Use the outline property in addition to the border. Outline works very similarly to border, but does have some slight differences. It can give you a third border box though, if used in addition to border-style:double;. Note that it might not work in older browsers.
CSS3 border-image. Using this, you can define your own graphics for the border, which means you can define as many lines as you like. Note: this definitely won t work in older browsers; it s only a fairly recent addition to CSS.
Use background-image to fake it. If you know the size of your box, this might be the simplest and most cross-browser compatible way to do it. Not so useful if you don t know the size of the box in advance though.

希望会有所帮助。

Answer 4

假设你试图达到3d/升的边境类型;如果是,你可以简单地使用<条码>边界式:灰oo/条码>:。 JS Fiddle demo。

但是,如果您能够使用<代码>:后,pseudo-element 和outset。边境式:

h2.bord {
    border-style:inset;
    border-width:8px;
    border-color:green;
    background-color:black;
    color:white;
    text-align:center;
    position: relative; /* in order to position the pseudo element relative to the parent */
    margin: 8px; /* to move the edges of the element from the container element in order to see the borders of the pseudo-element */
}

h2.bord::after {
    content:   ;
    position: absolute;
    top: -16px;
    left:-16px;
    right: -16px;
    bottom: -16px;
    border: 8px outset green;
}

JS Fiddle demo。

友情链接