div圆角边框代码（div加边框圆角）

本篇文章给大家谈谈div圆角边框代码，以及div加边框圆角对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、css圆角边框代码，css3中div圆角边框是怎么写的
• 2、html边框圆角化代码
• 3、网页设计中，怎么让DIV的边框的4个角呈圆角形
• 4、在HTML 里面 如何让一个DIV的边框变为圆角边框 而不是默认的矩形边框
• 5、在HTML里面，如何让一个DIV的边框变为圆角边框，而不是默认的矩形边框？

css圆角边框代码，css3中div圆角边框是怎么写的

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="yj"这个div四个角都圆15px;/div

结果如下：

图片圆角也是一样的：

css代码：

.yj{-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px;}

html代码：

img src="xp.jpg" width="100px" height="100px;" class="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;;

}

html边框圆角化代码

html边框圆角化可以用css中的“border-radius”属性来实现。

1、新建html文档，在body标签中添加一个div标签，然后为这个div标签设置边框，这时默认情况下边框是直角：

2、为div标签设置“border-radius”属性，属性值为圆角半径大小，这时边框的四个顶角都会变成圆角：

3、为div标签设置“border-radius”属性，属性值分别对应边框的左上角、右上角、右下角和左下角，这时可以对每个顶角自定义设置圆角半径：

网页设计中，怎么让DIV的边框的4个角呈圆角形

怎么能让一个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中的图片为圆角图片。

在HTML 里面 如何让一个DIV的边框变为圆角边框 而不是默认的矩形边框

可以实现 ，代码如下，你只要放在一个HTML页面中，运行即可看到效果

style type="text/css"

div#nifty{ margin: 0 10%;background: #9BD1FA}

p {padding:10px}

div.rtop, div.rbottom{display:block;background: #FFF}

div.rtop div, div.rbottom div{display:block;height: 1px;overflow: hidden; background: #9BD1FA}

div.r1{margin: 0 5px}

div.r2{margin: 0 3px}

div.r3{margin: 0 2px}

div.rtop div.r4, div.rbottom div.r4{margin: 0 1px;height: 2px}

/style

div id="nifty"

div class="rtop"div class="r1"/divdiv class="r2"/divdiv class="r3"/divdiv class="r4"/div/div

p无图片的圆角表格/p

div class="rtop"div class="r4"/divdiv class="r3"/divdiv class="r2"/divdiv class="r1"/div/div

/div

在HTML里面，如何让一个DIV的边框变为圆角边框，而不是默认的矩形边框？

上面这位兄台你的回答是COPY的吧，没有讲到重点不说，洋洋散散那么多字都是多余的，我给你写一句简单的代码。

CSS代码：

style

#myDiv {

border-radius: 4px; /*这句就是重点，让边框变为圆角*/

border: 1px solid #CCC; /*让边框变为1px宽度，直线，#CCC颜色*/

width: 500px;

height: 500px;

}

/sytle

HTML代码：

div id="myDiv"这是圆角矩形/div

就是这么简单，你COPY过去就OK了。

另外说一句，这个圆角的属性是CSS3中的特性，在IE9以下以及非webkit和moz内核的浏览器下都是不行的（比如IE8、IE7、IE6），这些浏览器就只能使用图片达到圆角效果了。

纯手工制造，希望对你有帮助，有任何疑问可以继续追问。

div圆角边框代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于div加边框圆角、div圆角边框代码的信息别忘了在本站进行查找喔。