水晶凸起效果是一種非常炫酷的CSS效果,可以讓頁面看起來更加立體、有層次感。實現方式也非常簡單,只需要幾行代碼即可。
/* 定義一個半透明的顏色,作為內部陰影的背景色 */ background-color: rgba(255, 255, 255, 0.2); /* 定義一個白色的邊框,厚度為1px */ border: 1px solid #fff; /* 定義上下左右四個角落的光暈效果 */ box-shadow: /* 左上角 */ -3px -3px 5px rgba(255, 255, 255, 0.5), /* 右下角 */ 3px 3px 5px rgba(0, 0, 0, 0.2), /* 右上角 */ 3px -3px 5px rgba(255, 255, 255, 0.5), /* 左下角 */ -3px 3px 5px rgba(0, 0, 0, 0.2);
其中,background-color
屬性定義了半透明的顏色作為內部陰影的背景色;border
屬性定義了白色的邊框,厚度為1px;box-shadow
屬性則定義了上下左右四個角落的光暈效果,具體參數含義可以仔細閱讀代碼注釋。
這樣,一個漂亮的水晶凸起效果就完成了。可以用在按鈕、標題、圖片等元素中,讓頁面看起來更加生動、動感。