HTML 这个Div框框怎么弄？

<div style="border:1px solid #999padding:3px"><img src="图片路径"></div>

这个就是用实线1像素宽的边框，padding 就是补白，做出来的效果就是里面的图片距离边框会有3像素的距离！！

旋转index文件代码：

3D旋转相册

*{

padding:0

margin:0

}

body,

html{

height:100%

}

/*背景图片在这里设置*/

body{

background-image:url("images/beijing.jpg")

background-size:100%100%

}

#box{

width:280px

height:400px

position:fixed

left:0

right:0

top:0

bottom:0

margin:auto

transform-style:preserve-3d

transform:rotateX(0deg)rotateY(0deg)

animation:go45slinearinfinite

}

#boximg{

width:280px

height:400px

position:absolute

left:0

top:0

}

#boximg:nth-child(1){

transform:rotateY(0deg)translateZ(650px)

}

#boximg:nth-child(2){

transform:rotateY(36deg)translateZ(650px)

}

#boximg:nth-child(3){

transform:rotateY(72deg)translateZ(650px)

}

#boximg:nth-child(4){

transform:rotateY(108deg)translateZ(650px)

}

#boximg:nth-child(5){

transform:rotateY(144deg)translateZ(650px)

}

#boximg:nth-child(6){

transform:rotateY(180deg)translateZ(650px)

}

#boximg:nth-child(7){

transform:rotateY(216deg)translateZ(650px)

}

#boximg:nth-child(8){

transform:rotateY(252deg)translateZ(650px)

}

#boximg:nth-child(9){

transform:rotateY(288deg)translateZ(650px)

}

#boximg:nth-child(10){

transform:rotateY(324deg)translateZ(650px)

}

@keyframesgo{

0%{

transform:rotateX(0deg)rotateY(0deg)

}

25%{

transform:rotateX(20deg)rotateY(180deg)

}

50%{

transform:rotateX(0deg)rotateY(360deg)

}

75%{

transform:rotateX(-20deg)rotateY(540deg)

}

100%{

transform:rotateX(0deg)rotateY(720deg)

}

}

images/1.jpg

images/2.jpg

images/3.jpg

images/4.jpg

images/5.jpg

images/6.jpg

images/7.jpg

images/8.jpg

images/9.jpg

images/10.jpg

按如下方式修改样式:

background:transparent url('双引号图片路径') no-repeat scroll 5px 5px

通过指定no-repeat使背景图不产生平铺效果,然后给上和左一个偏移量,假设5px.

---