html div box,html – 为转换后的div添加box-shadow
我正在使用CSS制作3D看書.我正處于最后一步,即為它添加盒子陰影.
如何添加box-shadow:10px 10px 30px rgba(0,0,0,0.3)?我認為我需要調整div設置.
有關視覺效果,請參閱jsFiddle.
.book-image-wrap {
margin: 25px auto;
height: 346px;
width: 230px;
position: relative;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
}
.book-image {
background: #000;
height: 346px;
width: 230px;
position: absolute;
left: 16px;
top: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-border-radius: 0 7px 7px 0;
-moz-border-radius: 0 7px 7px 0;
border-radius: 0 7px 7px 0;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
-webkit-transform: rotateY(30deg);
-moz-transform: rotateY(30deg);
transform: rotateY(30deg);
}
.book-image-cover {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 230px;
max-width: 230px;
max-height: 346px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
-webkit-transform-origin: 0;
-moz-transform-origin: 0;
transform-origin: 0;
}
.book-image-cover:after {
background: rgba(0, 0, 0, 0.06);
box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
content: '';
position: absolute;
top: 0;
left: 10px;
bottom: 0;
width: 3px;
}
.book-image-spine {
background: darkred;
width: 40px;
height: 344px;
position: absolute;
top: 0;
left: 0;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: 0;
-moz-transform-origin: 0;
transform-origin: 0;
}
總結
以上是生活随笔為你收集整理的html div box,html – 为转换后的div添加box-shadow的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 江苏涟水中学2021高考成绩查询,202
- 下一篇: 济南女子用计算机付款,山东一女子带孩子买