css 如何将七张照片布置成一个圈?

html-css05

css 如何将七张照片布置成一个圈?,第1张

1. 可以使用css的border-image属性设置边框的背景图片。2. 可以使用background设置多个背景图片,并分别设置每个背景的位置。3. 把所有图片先合成一个圆形图片,然后整个图片作为背景图片。

css3的圆角样式

border-radius就可以做到了,

圆形,就把四个角都设置成宽高的一半,就是50%,或者是固定值,,

注意的是,如果你是直接用Img标签的话,那你的Img

宽高要一样,就是说要是正方形,

如果你是通过容器来实现的话,你就直接把容器设置成正方形,border-radius:50%然后再background图片就可以了。

<div style="width:100pxheight:100pxborder-radius:50%overflow:hidden">

<img src="">

</div>

需要浏览器支持CSS 3 ,注意div的宽高要一样,也可以直接把样式添加在img上,但不建议那样