CSS3怎么寫按鈕內陰影
在CSS3中,可以使用box-shadow
屬性為按鈕添加內陰影。box-shadow
屬性接受四個值,分別表示陰影的水平偏移量、垂直偏移量、模糊半徑和顏色。
要為按鈕添加水平偏移量為10px、垂直偏移量為10px、模糊半徑為5px的內陰影,可以使用以下CSS代碼:
button { box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); }
上述代碼中,rgba(0, 0, 0, 0.5)
表示陰影顏色為黑色,透明度為0.5,可以根據(jù)需要調整陰影的顏色和透明度。
如果需要添加多個內陰影,可以使用逗號分隔多個box-shadow
值,以下CSS代碼可以為按鈕添加兩個內陰影:
button { box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5), -10px -10px 5px rgba(0, 0, 0, 0.5); }
上述代碼中,兩個陰影分別向左右兩側偏移,形成對稱的陰影效果。
需要注意的是,box-shadow
屬性支持的瀏覽器較多,但在一些較老的瀏覽器中可能不支持該屬性,在使用box-shadow
屬性時,建議考慮兼容性問題。
版權聲明:除非特別標注,否則均為本站原創(chuàng)文章,轉載時請以鏈接形式注明文章出處。