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