- 相關(guān)推薦
如何用CSS為圖片添加精美圓角外邊框
在網(wǎng)頁(yè)制作過(guò)程中，為了美化界面的需要，網(wǎng)頁(yè)設計者往往會(huì )選擇給圖片添加精美的圓角外邊框，經(jīng)過(guò)這樣的設計可以起到十分顯著(zhù)的效果，使瀏覽者產(chǎn)生新穎別致的體驗。實(shí)現該效果的方法很多，在此小編就從網(wǎng)頁(yè)設計者的角度出發(fā)，來(lái)探討一下利用CSS為圖片添加精美圓角外邊框的方法。 需要特別提醒一點(diǎn)的是，網(wǎng)頁(yè)設計應該具有更多的可擴展性和可重用性為最佳，下面設計的方法將會(huì )更能體現這一點(diǎn)。
方法/步驟
1.首先根據實(shí)現圖片的大小制作一個(gè)圓角邊框。打開(kāi)PS，新建一空白文檔，文檔的大小根據需要情況來(lái)定，在此小編將其設置為400*400,設置完成后點(diǎn)擊”好“按鈕。
2.選擇工具欄上的”矩形“工具，在屬性面板中將其半徑設置為”20像素“，然后在繪圖區繪制一個(gè)圓角矩形。
3.在該圖層的空白區域右擊，選擇”柵格化圖層“，將該圖層轉換成普通圖層。
4.在按住鍵盤(pán)上的CTRL鍵同時(shí)，點(diǎn)擊”形狀1“圖層，將當前圖層內容選中。然后點(diǎn)擊工具欄中的”填充“工具，設置一種合適的前景色，點(diǎn)擊圖形區域進(jìn)行填充。
5.雙擊該形狀1”圖層，在打開(kāi)的“圖層樣式”對話(huà)框中勾選 “斜面和浮雕”效果，并設置合適的參數后，點(diǎn)擊“確定”完成設置。
6.點(diǎn)擊“文件”菜單中的“存儲為Web所有格式”，在打開(kāi)的窗口中將輸出的圖片格式設置為“PNG-24”，最后點(diǎn)擊“存儲”進(jìn)行保存。
7.打開(kāi)Dreamweaver8，點(diǎn)擊“文件”菜單，在打開(kāi)的”新建文檔“窗口中選擇”基本頁(yè)“→”HTML“，點(diǎn)擊”創(chuàng )建“以新建一個(gè)網(wǎng)頁(yè)文件。
8.點(diǎn)擊”文件“→”另存為“，將該文件另存為”index.html"。
9.然后在該文檔的代碼區輸入如圖所示的代碼：
10.點(diǎn)擊“文件”→“在瀏覽器中預覽”，然后選項其中的一個(gè)瀏覽器進(jìn)行預覽，效果如圖所示。
【如何用CSS為圖片添加精美圓角外邊框】相關(guān)文章：
如何用CorelDraw制作一個(gè)精美的書(shū)簽08-04
如何免費為QQ空間添加背景音樂(lè )07-10
淘寶網(wǎng)頁(yè)編輯里面的圖片上，怎么添加文字，可以任意修改07-09
如何用麥當勞給的郵箱？07-10
QQ空間怎么添加音樂(lè )？07-10
如何用openssl查找素數?07-10
如何用京東白條購物07-11
QQ空間簽到有何用？07-10
電腦打印機怎么添加02-14