图片边框定义.docVIP

Zen-Cart 有許多商品圖片，使用 CSS 可以將商品圖片(無論圖片的長及寬是若干)自動加上框及陰影，增加商品的質感。這個方法不用每個商品圖片使用影像編輯軟體編修後上傳到網站，節省使用者許多時間。下圖左邊是商品圖片，右邊是本範例的完成品。1. 使用影像編輯軟體製作一長及寬各為400px的陰影，如果你的商品圖片長及寬超過400px，請自行將400px增加至符合你的需求。將圖片存檔為 shadow.gif。綠色方框說明陰影圖片的範圍，製作陰影圖片時，不需要繪製。注意：陰影必須包括在圖片中。2. 將下面的 CSS 程式碼加入 your_template/css/stylesheet.css 中。 程式碼: .img-wrapper {background: url(../images/shadow.gif) no-repeat bottom right;clear: right;float: left;position: relative;}.img-wrapper img {background-color: #fff;border: 1px solid #a9a9a9;padding: 4px;display: block;margin: -5px 5px 5px -5px;position: relative;} 3. 如何使用。 程式碼: div class=img-wrapperimg src=example.jpg width=200 height=200 alt=CSS Photo Shadow Example //div 4. 在? Zen-Cart 上應用。以新商品為例，在 your_templte/template/tpl_modules_products_new_listing.php 找到下列程式碼。 程式碼: ? ? ? if (PRODUCT_NEW_LIST_IMAGE != 0) {? ? ? ? $display_products_image = a href= . zen_href_link(zen_get_info_page($products_new-fields[products_id]), products_id= . $products_new-fields[products_id]) . . zen_image(DIR_WS_IMAGES . $products_new-fields[products_image], $products_new-fields[products_name], IMAGE_PRODUCT_NEW_LISTING_WIDTH, IMAGE_PRODUCT_NEW_LISTING_HEIGHT) . /a . str_repeat(br clear=all /, substr(PRODUCT_NEW_LIST_IMAGE, 3, 1));? ? ? } else {? ? ? ? $display_products_image = ;? ? ? } 改為 程式碼: ? ? ? if (PRODUCT_NEW_LIST_IMAGE != 0) {? ? ? ? $display_products_image = a href= . zen_href_link(zen_get_info_page($products_new-fields[products_id]), products_id= . $products_new-fields[products_id]) . div class=img-wrapper . zen_image(DIR_WS_IMAGES . $products_new-fields[products_image], $products_new-fields[products_name], IMAGE_PRODUCT_NEW_LISTING_WIDTH, IMAGE_PRODUCT_NEW_LISTING_HEIGHT) . /a/div . str_repeat(br clear=all /, substr(PRODUCT_NEW_LIST_IMAGE, 3, 1));? ? ? } else {? ? ? ? $display_products_image = ;? ? ? } 注意：shadow.gif 要上傳到 your_template/images。完成。 利用 css，可以有比較快的方法， 以下例子，使用在 Zen Cart v1.3.x, 1. 在產品詳細資料頁面的圖片上加上邊框，也可以有陰影效果1A. 邊