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

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

css html

Css 如何在HTML5中的新图形元素周围添加边框/边框？,css,html,Css,Html,如何在包括标题在内的两个图形周围添加边框或边框我试着使用图形的样式，但没有显示边框。我不想在img周围加边框，但要在图和标题（如果有的话）周围加边框 <!DOCTYPE HTML> <html lang="en"> <body> <figure style="border-width:thin"> <img src="image.png"> <figcaption>my im

如何在包括标题在内的两个图形周围添加边框或边框

我试着使用图形的样式，但没有显示边框。我不想在img周围加边框，但要在图和标题（如果有的话）周围加边框

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

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

</body>
</html>


我的形象

由于未知原因，

边框宽度的预定义值不起作用。请参见下面的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>


我的形象

哪一个比较容易，你挑吧
演示：

.框架{
边框：1px实心#000；/*外部边框*/
填充：10px；/*在边框和内容之间创建空白*/
我的形象
添加一个类并设置它们的样式
<!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>