2

如何在包括其标题的图形周围添加边框或框架？

我尝试对图形使用样式，但没有显示边框。我不希望 img 周围有边框，但如果有的话，可以同时围绕图形和标题。

<!DOCTYPE HTML>
<html lang="en">    
<body>

     <figure style="border-width:thin">
       <img src="image.png">
       <figcaption>my image</figcaption>
     </figure>

</body>
</html>
4

2 回答 2

1 
<!DOCTYPE HTML>
<html lang="en">
    <style>
      .frame{
       border: 1px solid #000; /*outside border*/
       padding: 10px; /* creates whitespace between border & content */
    </style>
<body>

 <figure class="frame">
   <img src="image.png">
   <figcaption>my image</figcaption>
 </figure>

</body>
</html>
于 2013-06-13T19:37:50.463 回答
1

由于某些未知原因， 的预定义值border-width不起作用。请参阅下面的 CSS 代码：

figure {
    border: 1px solid #000;
    padding: 5px;
}

或者你可以这样做：

<figure style="border: 1px solid #000">
    <img src="http://placehold.it/220x180.png">
    <figcaption>my image</figcaption>
</figure>

哪个更容易，请选择。

演示：

http://jsfiddle.net/jlratwil/gNFpv/4/

于 2013-06-13T05:17:40.783 回答