1、新建html文档。
2、书写hmtl代码。
3、书写css公用样式表代码。
4、书写css代码。代码整体结构。
6、查看效果。
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:0transform:rotate(0deg)}
to {left:1000pxtransform:rotate(360deg)}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {left:0transform:rotate(0deg)}
to {left:1000pxtransform: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:200pxheight:200pxborder-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:5px7、之后可以再次进入浏览器中，查看页面更改之后的效果图 。可以看到的，原来的方框已经有了明显的圆弧边框。
用CSS代码设定按钮的圆角样式，这个在css3中才能实现，通过使用border-radius来实现这个效果，不过有浏览器的兼容性问题，-moz(例如 -moz-border-radius)用于Firefox；-webkit(例如：-webkit-border-radius)用于Safari和Chrome；border-radius:5px 15px 20px 25px它的意思就是上的圆角5px，右的圆角15px，下的圆角20px，左的圆角25px，通过例子来实际看下：
<div id="round"></div>
#round {
padding:10pxwidth:300pxheight:50px
border: 5px solid #dedede
-moz-border-radius: 15px /* Gecko browsers */
-webkit-border-radius: 15px /* Webkit browsers */
border-radius:15px /* W3C syntax */
}
效果如图：
