技術標籤：H5/CSS

有些時候，我們想要在網頁/部落格中實現圖片的居中，並且新增題注，實現方式如下：

網頁

程式碼可以複製貼上：

<center>
    <img style="border-radius: 0.3125em;
    box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" 
    src="輸入圖片地址" width="輸入一個百分數以確定圖片大小比例">
    <br>
    <
 
div style="color:orange; border-bottom: 1px solid #d9d9d9;
    display: inline-block;
    color: #999;
    padding: 2px;">輸入題注</div>
</center>

效果：

網頁中的圖片

部落格

經過測試，部落格支援HTML4，不支援HTML5和CSS，所以style屬性無法生效，想要找到替換方案。請參考：HTML < img> 標籤，HTML < font>標籤

<!--刪除了style屬性，變得簡潔-->
 

<center>
    <img src="輸入圖片地址" width="輸入一個百分數以確定圖片大小比例">
    <br>
    <font size="輸入數字（推薦2或3）" face="輸入字型名稱，可選值：宋體/黑體/微軟雅黑/楷體/隸書..." color="#999">輸入題注</font>
</center>

演示：

奧斯卡影帝

為了自己使用方便，我把中文刪掉提取出自己的模板：

<center
 
>
    <img src="" width=" %">
    <br>
    <font size="3" face="楷體" color="#999"> </font>
</center>

如果有小夥伴知道如何為圖片新增陰影和圓角，歡迎評論，感激不盡~