Question

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

我尝试将风格用于图形，但没有边框显示出来。我不希望img附近有边框，但是如果有的话，不管是图形和标题。

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

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

</body>
</html>

Answer 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/

Answer 2

<!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>

如何在HTML5中的新图元素周围添加框架/边框？

2 个答案: