CSS圖片基本屬性

2012/11/24 13:08:15作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例介紹】

CSS圖片基本屬性

在CSS中可以通過邊框?qū)傩詾閳D片添加各式各樣的邊框。border-style用來定義邊框的樣式，如虛線、實(shí)線或點(diǎn)畫線等。

【基本語法】

【語法介紹】

語法介紹：
border-width：用來設(shè)置邊框?qū)挾?，可以使用各種CSS中的長度單位，最常用的是像素。
border-style：用來設(shè)置邊框樣式，可以選擇一些預(yù)先定義好的線型。
border-color：用來設(shè)置邊框顏色，可以使用各種合法的顏色來定義。

【實(shí)例代碼】


<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>設(shè)置圖片邊框基本屬性</title>
<style type="text/css">
.img1{
 border-style:dotted; /* 點(diǎn)畫線 */
 border-color:#FF0000; /* 邊框顏色 */
 border-width:4px;  /* 邊框粗細(xì) */}
.img2{
 border-style:dashed; /* 虛線 */
 border-color:#33FF00; /* 邊框顏色 */
 border-width:2px;  /* 邊框粗細(xì) */}
</style>
   </head>
   <body>
      <img src="car.jpg" class="img1"> 
      <img src="car.jpg" class="img2">
   </body>
</html>

【代碼分析】

其顯示效果如圖所示，第一幅圖片設(shè)置的是紅色、4像素寬的點(diǎn)畫線，第二幅圖片設(shè)置的是綠色、2像素寬的虛線。

基本屬性運(yùn)行效果