CSS3中的boxshadow屬性可以為元素添加陰影效果,而其中的inset值可以讓陰影呈現內凹的效果。下面是一些示例代碼:
/* 單色內凹陰影 */ .box { box-shadow: inset 0 0 10px rgba(0,0,0,0.5); } /* 多色內凹陰影 */ .box { box-shadow: inset 0 0 10px rgba(0,0,0,0.5), inset 0 0 20px rgba(255,255,255,0.5); } /* 內凹文字 */ .box { color: white; text-shadow: 1px 1px rgba(0,0,0,0.5); } /* 內凹按鈕 */ .btn { box-shadow: inset 0 0 10px rgba(0,0,0,0.5), inset 0 0 20px rgba(255,255,255,0.5); background-color: rgba(0,0,0,0.5); color: white; border: none; padding: 10px 20px; border-radius: 5px; }
使用box-shadow的inset值可以為元素添加出內凹陰影的效果,同時也能夠用于實現內凹的文本或按鈕。