css样式中空心正方形,css空心圆

用css3写一个移动端的正方形，在各种高分辨率的手机下都一样美观，求大神帮帮我

首先，最简单的办法是把宽和高设为相同的固定值。但是如果是采用自适应布局的，比如正方形的宽是屏幕宽度的50%，则要这样：

div style="width:50%; height:50vw; background-color:#f00"/div

唯一要注意的就是可能存在浏览器兼容问题，不过我在手机微信内置浏览器以及电脑的Chrome上测试都没问题

相关问答

Q1: div+css中将默认的单选按钮样式（圆的）变成正方形的样式怎么写?

1、首先打开hbuilder软件，新建几个默认的复选框。

2、然后在上方的style标签设置input的样式，先设置input的display属性为none，将默认的单选框去掉，在设置一下各个单选框的margin的距离。

3、接着在下方继续设置样式，设置label标签的before和after伪元素，将原有before的单选框选中状态的属性“checked+label”设置变为红色实心框，同时未选中的状态的“label::after”为白色空心方框。

4、最后打开浏览器，即可看到设置好的样式，其中被选中的是红色的实心方框，没被选择的则是没有颜色的方框。

Q2: HTML网页制作中如何实现空心小正方形

一个div，div class="square"/div

不设置背景色，只设置边框，和宽高

.square{

width:100px;

height:100px;

border:1px solid red;

}

Q3: CSS3怎么画一个4分之3的空心扇形

先画一个圆，再画一个旋转45度的正方形，然后让正方形定位到圆上面盖住圆

Q4: 如何使用CSS画一个空心长方形 要代码哦，是使用DIV+CSS

如果你只要一条垂直线就设置这个DIV的边框线样式就可以了，样式代码：border-left:1px #000000 solid 这里的border-left是指这个DIV的左边边框，1px就是线的宽度，#000000是线的颜色（这里是黑色），solid是线的样式（这里是实线），整个DIV的代码可以这样写：div style="width:200px; height:500px; border-left:1px #000000 solid;"/div

Q5: css实现正方形

如果仅仅是设置width 和 height的话，这个问题就不用说了，这里考虑的问题主要是padding的百分比是相对于谁来说的

元素的padding 和 margin百分比都是想对应父元素的width（父元素必须有width这个值 否则往上查找知道body）来说的， 如下通用的css正方形方案

设置一个伪元素，伪元素用的是利用 padding-bottom撑起父元素的高度，padding相对高度为 父元素的 width