1、HTML源代码完整代码:
复制代码代码如下:
图片圆形布局 在线演示 DIVCSS5。
2、对应CSS代码:
复制代码代码如下:
#divcss5{ margin:10px auto}。
#divcss5 img{ border-radius:50%}。
命名盒子“id=divcss5”盒子居中,同时上下外间距为10px,然后设置对象盒子里img图片圆角50%。
首先,把宽和高设为同样的固定值,则肯定是正方形,这个不用多说;
其次,如果是自适应的界面,需要用百分比来设置正方形的边长,则可以用css3的新增长度单位vw、vh来设置,1vw等于视口宽度(viewport width)的百分之一,也就是说100vw就是视口的宽度。同理,1vh等于视口高度(viewport height)的百分之一。比如下面这个正方形的边长是屏幕宽度的50%:
<div style="width:50vw height:50vw background-color:#888"></div>
但是,这个方法要求浏览器支持css3,一些老的浏览器可能就不支持了。