CSS玻璃略微折叠边框3D效果

时间：2018-04-04 14:04:24

标签： css css3

我试图使用CSS获得类似的外观（见下图）。这使得所有边框都略微折叠并具有精简3D外观。我尝试使用box-shadow并粘贴下面的代码。这给了我一些类似的形状，但不能得到很好的一个，并使用两个DIV来获得这种效果。我们可以使用单个DIV ..？谢谢

enter image description here

＆＃13;
＆＃13; 
.div-1 {
  width:150px;
  height:300px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,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;
}
＆＃13; 
<!DOCTYPE html>
<html>
<body>
  <div class="div-1">
    <div class="div-2"></div>
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：3)

我想你可以这样：

＆＃13;
＆＃13; 
.div-1 {
  width:150px;
  height:300px;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.45);
  border-radius: 10px;
 }
＆＃13; 
<!DOCTYPE html>
<html>
<body>
  <div class="div-1">
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

＆＃13;
＆＃13; 
.div-1 {
	width:150px;
	height:300px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23), 0 0 5px #aaa inset;
	border-radius: 10px;
	position:relative;
  display:block;
	}
＆＃13; 
<!DOCTYPE html>
    <html>
    <body>
      <div class="div-1">
      </div>
    </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题