第十二章圖片樣式

時間 2019-11-12

標籤第十二圖片樣式简体版

原文原文鏈接

一、圖片邊框html

在HTML中能夠直接經過<img>標記的border屬性值爲圖片添加邊框，從而控制邊框的粗細，當設置該值爲0時，則顯示爲沒有邊框。瀏覽器

例全部邊框都是黑色的，並且風格十分單一，都是實線，僅僅只是在邊框粗細上可以進行調整。spa

<img src="boluo.jpg" border="0">
<img src="boluo.jpg" border="1">
<img src="boluo.jpg" border="2">
<img src="boluo.jpg" border="3">

在CSS中能夠經過border屬性爲圖片添加各類各樣的邊框，border-style定義邊框的樣式，如虛線、實線或點劃線等，在Dreamweaver中經過語法提示功能，即可輕鬆得到各類邊框樣式的值。還能夠經過 border-color定義邊框的顏色，經過border-width定義邊框的粗細。還能夠分別設置4個邊框的不一樣樣式，即分別設定border-left、border-right、border-top、border-bottom的樣式。border 屬性還能夠將各個值寫到同一語句中，用空格分離，這樣能夠大大減化CSS代碼的長度。code

<html>
<head>
<title>邊框</title>
<style>
<!--
img.test1{
    border-style:dotted;       /*點劃線*/
    border-color:#ff9900;     /*邊框顏色*/
    border-width:5px;       /*邊框粗細*/
}
img.test2{
    border-style:dashed;
    border-color:blue;
    border-width:2px;
}

img{
    border-left-style:dotted;         /*4個邊框分別設置不一樣的風格樣式*/
    border-left-color:#ff9900;
    border-left-width:5px;
    border-right-style:dashed;
    border-right-color:#33cc33;
    border-right-width:2px;
    border-top-style:solid;
    border-top-color:#cc00ff;
    border-top-width:10px;
    border-bottom-style:groove;   
    border-bottom-color:#666666;
    border-bottom-width:15px;
    
}
img.test3{
    border:5px double #ff00ff;          /*將各個值合併*/
}
img.test4{
    border-right:5px double #ff00ff;
    border-left:8px solid #0033ff;
}
-->
</style>
</head>
<body>
<img src="banana.jpg" class="test1">
<img src="banana.jpg" class="test2">

<img src="grape.jpg">
<img src="peach.jpg" class="test3">
<img src="peach.jpg" class="test4">
</body>
</html>

二、圖片縮放htm

CSS控制圖片的大小與HTML同樣，也是經過width和height來實現的，所不一樣的是CSS中能夠使用更多的值。例如當設置width的值爲50%時，圖片的寬度將調整爲父元素寬度的一半。blog

當僅僅設置了圖片的width屬性，而沒有設置height屬性時，圖片自己會自動等縱橫比例縮放，若是隻設定height屬性也是同樣的道理。只有當同事設定width和height屬性時纔會不等比例縮放。（相對body的寬度，當瀏覽器窗口改變其寬度時，圖片的大小也會相應地發生變化）圖片

<html>
<head>
<title>圖片縮放</title>
<style>
<!--
img.test1{
    width:50%;      /*相對寬度(即相對於body的寬度)*/
}
img.test2{
    width:70%;      /*相對寬度和高度*/
    height:110px;
}
-->
</style>
</head>
<body>
<img src="pear.jpg" class="test1">
<img src="cup.jpg"" class="test2">
</body>
</html>