CSS 可以實現許多酷炫的效果,其中讓一條線發光就是其中之一。
通過下面的代碼,可以讓一條線在 hover 時發光:
.line { border: 1px solid #000; padding: 10px; } .line:hover { border-color: transparent; box-shadow: 0 0 10px #fff; }
這里首先定義了一個類名為 line 的 div,設定了邊框和內邊距。當鼠標指向這個 div 時,即 hover 狀態,border-color 會變成透明,同時通過 CSS3 的 box-shadow 屬性,使 div 產生一個白色的發光效果。
你也可以通過其他屬性調整發光效果的顏色和大小:
.line:hover { border-color: transparent; box-shadow: 0 0 10px #f00; }
修改 box-shadow 的顏色值即可修改發光顏色,而 box-shadow 的第三個參數則表示模糊半徑,決定了發光的大小。
通過這種方法可以讓網頁看起來更加生動有趣,趕快學習一下吧!