CSS 中,給圖片加邊框并讓邊框發光是一個常見的設計技巧。通過 CSS3 的 box-shadow 屬性和 border-radius 屬性,我們可以輕松實現這個效果。
/* 給圖片設置邊框 */ img { border: 3px solid #fff; border-radius: 50%; } /* 給邊框加發光效果 */ img:hover { box-shadow: 0px 0px 10px 0px #fff; }
以上 CSS 代碼將圖片的邊框設置為白色實心的圓形邊框,同時設置了邊框的圓角為 50%。當鼠標懸停在圖片上時,通過 box-shadow 屬性的設置,我們在邊框周圍產生了一圈白色的發光效果。
這個技巧在網站設計中非常實用,可以讓頁面的重點內容更加醒目,并提升用戶的交互體驗。同時,我們也可以根據設計需求,調整邊框和發光效果的顏色、大小和形狀,使頁面展示更加豐富多彩。