站長(zhǎng)資訊網(wǎng)
之前的文章《手把手教你使用css制作一個(gè)圓角按鈕效果（代碼詳解）》中，給大家介紹了怎么使用css制作一個(gè)圓角按鈕效果。下面本篇文章給大家介紹怎么使用html給圖片添加邊框效果，我們一起看看怎么做
圖片添加邊框效果的方法
1、打開HTML代碼軟件，建立一個(gè)代碼，添加圖片效果有兩種方法
一方法：圖片添加描邊或者是給外面的盒子。
二方法：就是直接在img圖片標(biāo)簽。
兩項(xiàng)選一，我用是二方法。
代碼示例
<style> <div>{ margin-top:50px; margin-left: 100px: } </style> </head> <body> <div> <img src="787.jpg"> </div>
代碼效果
代碼效果出來(lái)了，發(fā)現(xiàn)沒有邊框了。
2、圖片添加邊框設(shè)置，樣式：border-style，樣式有solid 實(shí)心的、dashed虛線等樣式，顏色使用border-color來(lái)設(shè)置，粗細(xì)使用border-width來(lái)設(shè)置。
注：邊框樣式border-style，這重要的，不然其它屬性全部失效。
div img{ border-style: dashed; border-width: 5px; border-color: blue;
代碼效果出來(lái)，這樣就是一個(gè)邊框顏色后，現(xiàn)在的邊框是一個(gè)虛線組成的
3、將這三個(gè)屬性組合成一個(gè)屬性，就如border:dashed 5px blue；這樣效果還是一樣的，很方便。
div img{ border:dashed 5px blue; }
代碼效果出來(lái)了還是一樣，因?yàn)槿齻€(gè)屬性組合成一個(gè)屬性，接著，我們只選擇對(duì)圖片的一邊添加效果。
4、左邊：border-left，右側(cè)：border-right，上面：border-top，下面：border-left按照這樣的設(shè)置可以單獨(dú)對(duì)任何一邊設(shè)置。
div img{ border:dashed 5px blue; border-right:solid 10px blue; border-top: solid 10px blue; border-bottom: solid 10px blue; border-left: solid 10px blue; }
5、代碼效果出來(lái)了，差不多這個(gè)狀態(tài)，邊框?qū)挾饶懿荒芊糯?？通過(guò)div的border屬性控制邊框顏色，設(shè)置border的寬度為20px，顏色為藍(lán)色
div img{ border:dashed 5px blue; border-right:solid 20px blue; border-top: solid 20px blue; border-bottom: solid 20px blue; border-left: solid 20px blue
最終效果了。
筆記：border簡(jiǎn)寫屬性的構(gòu)成
-
border-width：規(guī)定邊框的寬度；
-
border-style：規(guī)定邊框的樣式；
-
border-color：規(guī)定邊框的顏色。
推薦學(xué)習(xí)：Html視頻教程
