我正在使用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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。