css3有一种新功能就是给div或者是图片等圆角，圆角代码怎么写你知道吗，作为一个经常写css的网站制作者，今天跟大家分享一下css圆角边框代码，当然图片圆角也是一样的，我分享的代码尽量兼容各种浏览器，包括ie、360浏览器、百度浏览器、谷歌浏览器等
方法/步骤
1.css代码：
.yj{
padding:10px; width:300px; height:50px;
border: 2px solid #000000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius:15px;
}
-moz-border-radius: 15px; -webkit-border-radius: 15px; 这两个是为了兼容其他一些不常用浏览写的css圆角代码
html代码：
div class="ax3a7b-de37-b346-e69c yj"这个div四个角都圆15px;/div
结果如下：
2 .图片圆角也是一样的：
css代码：
.yj{-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px;}
html代码：
img src="xp.jpg" width="100px" height="100px;" class="axde37-b346-e69c-cfbb yj" /
3.css3圆角代码也支持上下左右的：
css代码这么写：
.yj{
padding:10px; width:300px; height:50px;
border: 2px solid #000000;
-moz-border-radius: 0px 0px 20px 25px;;
-webkit-border-radius: 0px 0px 20px 25px;;
border-radius:0px 0px 20px 25px;;
}
4.圆角代码也支持拆分的（四个边框都圆角10px的拆分css代码如下）：
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
border-bottom-left-radius: 10px;
怎么能让一个DIV或者一个图片的四角为圆形呢？其实并不需要我们去把每个角都剪切掉，而只需要设置每个解的圆狐度即可。
案例代码：
div{border-radius:5px 5px 0 0;}设置DIV对象盒子左上角和右上角5px圆角，其它两个角为0不圆角
border-radius:3px 4px 5px 6px代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角.box2 img{border-radius:5px}
设置DIV中的图片为圆角图片。
div {
border-radius: 10px; // 根据你div的宽高来调整圆角大小，这里我设置的10px
}
Div切圆角的实现原理：
1，首先使用P标签，第一行距Div的边距为一个数值（假设为3px;）；
2，第二个p标签在第一个的下一行，距Div的边距为第一行的减去一个像素数值（假设为2px;）；
3，依次实现，直到最后一个p标签的值为1px；
4，第一行全显示，后面的只显示两头的一个像素即可。
5，再配合中间的DIV显示两头的线框，即可实现
实现代码：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312"
/
titleDiv圆角实现/title
style
type="text/css"
.one
{
display:block;
overflow:hidden;
height:1px;
margin:0
4px;
border-left:1px
solid
#B2D0EA;
border-right:1px
solid
#B2D0EA;
background:#B2D0EA;
}
.two
{
display:block;
overflow:hidden;
height:1px;/*线的高度为1px*/
margin:0
3px;/*距离外层DIV的左右边距各3px*/
border-left:1px
solid
#B2D0EA;/*只显示线的左边的1px*/
border-right:1px
solid
#B2D0EA;/*只显示线的右边的1px*/
background:#B2D0EA;/*配合内层Div的颜色变化，*/
}
.three
{
display:block;
overflow:hidden;
height:1px;
margin:0
2px;
border-left:1px
solid
#B2D0EA;
border-right:1px
solid
#B2D0EA;
background:#EDF7FF;
}
.four
{
display:block;
overflow:hidden;
height:1px;
margin:0
1px;
border-left:1px
solid
#B2D0EA;
border-right:1px
solid
#B2D0EA;
background:#EDF7FF;
}
.rou/*DIV只显示左右的边框，颜色和p标签的一致*/
{
border-left:1px
solid
#B2D0EA;
border-right:1px
solid
#B2D0EA;
}
.rou2
{
border-left:1px
solid
#B2D0EA;
border-right:1px
solid
#B2D0EA;
background:#EDF7FF;
}
/style
!--Div切圆角的实现原理：
1，首先使用P标签，第一行距Div的边距为一个数值（假设为3px;）；
2，第二个p标签在第一个的下一行，距Div的边距为第一行的减去一个像素数值（假设为2px;）；
3，依次实现，直到最后一个p标签的值为1px；
4，第一行全显示，后面的只显示两头的一个像素即可。
5，再配合中间的DIV显示两头的线框，即可实现
--
/head
body
div
!--p
class="axb346-e69c-cfbb-6c18 one"/p--
p
class="axe69c-cfbb-6c18-724f two"/p
p
class="axcfbb-6c18-724f-4137 three"/p
p
class="ax6c18-724f-4137-1897 four"/p
div
class="ax724f-4137-1897-0e23 rou2"
标题栏
/div
div
class="ax4137-1897-0e23-62a2 rou"
内容页！
/div
p
class="ax1897-0e23-62a2-a93f four"/p
p
class="ax0e23-62a2-a93f-ef09 three"/p
p
class="ax62a2-a93f-ef09-584e two"/p
!--p
class="axa93f-ef09-584e-44ee one"/p--
/div
/body
/html
我个人觉得最简单的还是用背景，用两张背景重叠，那HTML代码也会少点，比如：
一个要做圆角的DIV，设ID为bg
div id="bg"
div id="bg_left"/div
/div
让ID为bg的做个背景，背景向右对齐，向左延伸。
然后让ID为bg_left的浮动在左边，宽度BG的。
bg_left的背景就是左边的圆角向右延伸，但宽度小于bg，bg的背景就是右圆角向左延伸，如不用做透明的话，宽度多少就无所谓了，当然，方向也可以反过来，让bg_left这个框float在右边。。。
明白我的意思吗？呵呵。。。
我的就是这样做的，
自己另存源码来看。。。
本文转载自互联网，如有侵权，联系删除
