CSS3是一種新一代的CSS技術,它提供了豐富的特效和功能,使得我們可以更輕松地實現各種想要的效果。其中,圖片邊框特效是一種非常流行的效果之一,下面我們來看一下如何使用CSS3實現圖片邊框特效。
.img-border { border: 5px solid #ccc; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.5); transition: all 0.3s ease; } .img-border:hover { border-color: #f00; box-shadow: 0 0 20px rgba(255,0,0,0.5); }
在這段代碼中,我們定義了一個名為.img-border的類,它為圖片提供了邊框特效。首先,我們設置了一個5像素寬的實線邊框,并賦予了10像素的圓角;其次,我們增加了一個陰影,使得圖片看起來更加立體;最后,我們使用CSS3過渡效果,使得在鼠標懸停時邊框和陰影都有一個平滑的變化。
當然,你也可以根據自己的需要,進行更多的調整和改變,比如改變邊界顏色、調整陰影大小或設置動畫時間等等。總之,通過使用CSS3,我們可以輕松實現各種效果,讓網站更加美觀和動態。
上一篇css3圖片適應大小
下一篇css3圖片飛入動畫教程