我试图使用CSS获得类似的外观(见下图).这使得所有边框都略微折叠并具有精简3D外观.我尝试使用box-shadow并粘贴下面的代码.这给了我一些类似的形状,但不能得到很好的一个,并使用两个DIV来获
... . . 我试图使用CSS获得类似的外观(见下图).这使得所有边框都略微折叠并具有精简3D外观.我尝试使用box-shadow并粘贴下面的代码.这给了我一些类似的形状,但不能得到很好的一个,并使用两个DIV来获得这种效果.我们可以使用单个DIV ..?谢谢
.div-1 { width:150px; height:300px; box-shadow: 0 3px 6px rgba(0,0.16),0 3px 6px rgba(0,0.23); border-radius: 10px; }.div-2 { width:100%; height:100%; box-shadow: width:100%;height:100%;box-shadow: 0 0 5px #aaa inset; border-radius: 10px;}
<!DOCTYPE html><html><body> <div class="div-1"> <div class="div-2"></div> </div></body></html>.
解决方法
. 我想你可以这样:
.div-1 { width:150px; height:300px; box-shadow: inset 0 3px 6px rgba(0,0 4px 6px rgba(0,0.45); border-radius: 10px; }
<!DOCTYPE html><html><body> <div class="div-1"> </div></body></html>. . .. ...