11 圖片邊框及混排

透過<img>標記的border屬性值則是為圖片新增邊框及粗細，當設置為0時，則顯示"無邊框"。例:

<img src="/public/images/ch03/pic.jpg" border=0>
<img src="/public/images/ch03/pic.jpg" border=1>
<img src="/public/images/ch03/pic.jpg" border=2>

透過border-style可以定義邊框的各種樣式。例: 

<style type="text/css">
img.pic1 {
border-style:dotted;     /* 點畫線 */
border-color:#FF9900;  /* 邊框顏色 */
border-width:4px;      /* 邊框粗細 */
}

img.pic2 {
border-style:dashed;     /* 虛線 */
border-color:#000088;  /* 邊框顏色 */
border-width:6px;      /* 邊框粗細 */
}
</style>

<img src="/public/images/ch03/pic.jpg" class="pic1">
<img src="/public/images/ch03/pic.jpg" class="pic2">

圖片混排是透過float屬性來實現文字環繞圖片。例:

<style type="text/css">
img{
    float: right;    /* 文字環繞圖片 */
}
</style>

<img src="/public/images/ch03/pic.jpg" border="0">
<p>請加入一堆有的沒的文字吧!!</p>
<p>請加入一堆有的沒的文字吧!!</p>
<p>請加入一堆有的沒的文字吧!!</p>
<p>請加入一堆有的沒的文字吧!!</p>







Comments