CSS中內投影是一種常用的樣式效果,可以將文章或者圖片的邊框內凹,增加其立體感和深度感。
.box{ box-shadow: inset 0 0 10px rgba(0,0,0,0.5); border: 1px solid #ccc; }
如上代碼所示,使用box-shadow屬性來設置內投影。其中inset屬性表示是內投影,不加該屬性則為外投影。而后面的值表示投影的距離、模糊程度、顏色等。這里設置的是黑色帶點半透明的投影。
需要注意的是,內投影只會影響邊框內部的元素,如果需要讓內投影圍繞著元素而不是邊框,需要將邊框的寬度設置為0,然后使用padding屬性設置邊距。如下代碼所示:
.box{ box-shadow: inset 0 0 10px rgba(0,0,0,0.5); border:none; padding:10px; }
這樣便可以讓內投影圍繞著元素而不是邊框了。
另外,inner shadow還可以用來實現類似文字的浮雕效果,通過給文字添加內投影,然后再在文字上方添加一層半透明的顏色,達到立體效果。具體實現可以參考下面的代碼:
.text{ color: #333; font-size: 36px; text-shadow: none; background-color: rgba(255,255,255,0.5); box-shadow: inset 0 0 10px rgba(0,0,0,0.5); padding:10px; display: inline-block; }
通過設置背景顏色和文本上方的半透明色塊,再加上內投影,便實現了典型的文字浮雕效果。
以上就是CSS中內投影的基本知識,通過合理使用內投影屬性,可以讓頁面元素擁有立體感和層次感,提升用戶的視覺體驗。