正文
css边框设置圆形，css图框圆边效果
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
css中怎么把正方形变成圆形
1. 请问,CSS3中怎样能让一个方框变成圆形之后,再以圆形的样子向前
!DOCTYPE html
html
head
style
div
{
position: absolute;
width:100px;
height:100px;
border-radius: 50%;
background:red;
animation:myfirst 5s;
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
-moz-animation:myfirst 10s; /* Firefox */
-webkit-animation:myfirst 10s; /* Safari and Chrome */
-o-animation:myfirst 10s; /* Opera */
}
@keyframes myfirst
{
from {left:0;transform:rotate(0deg);}
to {left:1000px;transform:rotate(360deg);}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {left:0;transform:rotate(0deg);}
to {left:1000px;transform:rotate(360deg);}
}
/style
/head
body class="page_speeder_331240309"
div/div
/body
/html
2. 怎么把DIV变成一个圆
1、【第一步】打开Dreamweaver cc 2014软件，选择建立html界面，里面自动生成一些必要代码的代码格式，不需再浪费时间去写。
2、【第二步】在body标签内输入：div class="Odiv"/div；，这里的div就是用于画圆形的标签。
3、【第三步】在相对靠前的位置，输入
.Odiv{ width:200px; height:200px; border-radius:50%; background-color:#1EFD0C;}
这就是css样式用于修饰div标签，使得div形成一个绿色的圆图形。
4、【第四步】保存好代码，回到Dreamweaver 界面，摁F12键，弹出对话框，就能看所画绿色圆图形。
3. div+css中将默认的单选按钮样式（圆的）变成正方形的样式怎么写
1、首先打开hbuilder软件，新建几个默认的复选zhidao框。
2、然后在上方的style标签设置input的样式，先设置input的display属性为none，将默认的单选框去掉，在设置一下各个单选框的margin的距离内。容
3、接着在下方继续设置样式，设置label标签的before和after伪元素，将原有before的单选框选中状态的属性“checked+label”设置变为红色实心框，同时未选中的状态的“label::after”为白色空心方框。
4、最后打开浏览器，即可看到设置好的样式，其中被选中的是红色的实心方框，没被选择的则是没有颜色的方框。
4. 如何用CSS可以使边框变圆
用CSS可以使边框变圆方法： 工具/原料 Dreamweaver软件 电脑 方法/步骤 1、首先需要打开自己的DW软件，选择文件下面的新建，在弹出框中选择新建一个html页面。
2、进入到新建的html页面后，点击首先做的是将网页进行保存，这样才能在浏览器中进行预览，方便起见，我们保存到桌面上即可。 3、保存之后，我们再回到test页面中，敲入一些代码，使得网页可以呈现出一个个的小框。
4、按下键盘上的F12键盘，可以让网页在默认的浏览器中测试显示，可以看到一行的文字， 5、但是文字所在的边框之间并没有明显的间隔，接下来需要为文字之间添加间距。即使用margin-left，更改之后的页面如下图所示。
6、然后再次回到DW软件的编辑页面，在style样式中，添加一句：border-radius:5px; 7、之后可以再次进入浏览器中，查看页面更改之后的效果图 。可以看到的，原来的方框已经有了明显的圆弧边框。
相关问答
Q1: divcss圆角边框怎么设置
css3有一种新功能就是给div或者是图片等圆角，圆角代码怎么写你知道吗，作为一个经常写css的网站制作者，今天跟大家分享一下css圆角边框代码，当然图片圆角也是一样的，我分享的代码尽量兼容各种浏览器，包括ie、360浏览器、百度浏览器、谷歌浏览器等
方法/步骤
1.css代码：
.yj{
??padding:10px;width:300px;height:50px;
??border:2pxsolid000000;
??-moz-border-radius:15px;?
??-webkit-border-radius:15px;?
??border-radius:15px;??????
}
?-moz-border-radius:15px;-webkit-border-radius:15px;?这两个是为了兼容其他一些不常用浏览写的css圆角代码
html代码：
divclass="yj"这个div四个角都圆15px;/div
结果如下：
2.图片圆角也是一样的：
css代码：
.yj{-moz-border-radius:15px;??-webkit-border-radius:15px;border-radius:15px;}
html代码：
imgsrc="xp.jpg"width="100px"height="100px;"class="yj"/
3.css3圆角代码也支持上下左右的：
css代码这么写：
.yj{
??padding:10px;width:300px;height:50px;
??border:2pxsolid000000;
??-moz-border-radius:0px0px20px25px;;???
??-webkit-border-radius:0px0px20px25px;;?
??border-radius:0px0px20px25px;;?
}
4.圆角代码也支持拆分的（四个边框都圆角10px的拆分css代码如下）：
border-top-left-radius:10px;??
border-top-right-radius:10px;?
?border-bottom-right-radius:10px;?
border-bottom-left-radius:?10px;
Q2: css怎么设置边框虚线为圆点而不是方的
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titletest/title
style
div {
text-align: center;
margin-bottom: 20px;
width: 100px;
height: 100px;
line-height: 100px;
}
.a {
/*圆点*/
border: 10px dotted red;
}
.b {
/*实线*/
border: 10px solid red;
}
.c {
/*双实线*/
border: 10px double red;
}
.d {
/*虚线*/
border: 10px dashed red;
}
/style
/head
body
div class="a"
圆点
/div
div class="b"
实线
/div
div class="c"
双实线
/div
div class="d"
虚线
/div
/body
/html
Q3: 在CSS中如何设置一个元素的圆角边框??
先定义元素的width和height属性，通过border-radius: 10px; 来设置圆角直径大小，根据实际需求调整，通过此方法也能把元素变成一个圆形
Q4: CSS盒子模型-圆角边框
CSS3中新增了圆角边框样式，可以将盒子变为圆角。
语法：
border-radius:length;
例：
radius(半径）圆角原理： 设置一个length半径大小的圆与盒子相交，保留相交后的圆角。
css边框设置圆形的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css图框圆边效果、css边框设置圆形的信息别忘了在本站进行查找喔。
