Question

如何制作此蓝色边框：

https://www.dropbox.com/s/wnob7vg8i9i728r/itw5-screenshot.png

使用此图片：

https://www.dropbox.com/sh/r5nmphtjprwp69t/TF3xIv9J7H

html文件是这样的：

 <div id="inner-frame">
             <p> Lorem ipsum ....</p>
         </div>

但仅限于CSS

非常感谢你。

PS：

我需要在左下角获得bl.jpg，在右下角获得br.jpg，在左上角获得tl.jpg，在右上角获得tr.jpg并使用b.jpg，t.jpg l.jpg和r.jpg填补这个cornesr之间的空间

Answer 1

检查这些链接，它们可能有助于您了解如何构建所需的边框：
http://css-tricks.com/understanding-border-image/
http://www.w3schools.com/cssref/css3_pr_border-image.asp

Answer 2

HTML： <div class="container"> <p> Lorem ipsum ....</p> </div>

CSS： .container{ background: url(http://dl.dropboxusercontent.com/sh/r5nmphtjprwp69t/kXimIS2soN/border-orig.jpg) no-repeat; padding 20px; }

填充可能不同。

Answer 3

我希望这个选项适合：

<div id="inner-frame">
   <p> Lorem ipsum ....</p>
</div>

#inner-frame {
    margin: 100px auto;
    width: 500px;
    height: 200px;
    background-color:lightgrey;
    border:30px solid transparent;
    border-image: url('../img/border.png');
    border-image-slice: 30;
    border-image-width: 1 1 1 1;
    border-image-outset: 0;
    border-image-repeat: initial;
}

使用CSS3从图像边框

3 个答案: