在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），这些浏览器就只能使用图片达到圆角效果了。
纯手工制造，希望对你有帮助，有任何疑问可以继续追问。
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），这些浏览器就只能使用图片达到圆角效果了。
纯手工制造，希望对你有帮助，有任何疑问可以继续追问。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你把下面的代码保存为html文件，然后打开就知道了！ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>testdiv</title>
<style>
#d1,#d3,#d4{
margin:5px 0px;
width:200px;
background-color:#eee;
}
#d1{
border:1px solid #444;
height:100px;
padding:0px 15px;
}
#d3,#d4{
margin-top:0px;
margin-bottom:0px;
border-left:1px solid #444;
border-right:1px solid #444;
}
.m{
height:100px;
width:200px;
padding:0px 15px;
position:relative;
}
#d3 .m{
margin:-4px 0px;
}
#d4 .m{
margin:-5px 0px;
}
.rt,.rb{
display:block;
width:232px;
margin-left:0px;
margin-right:0px;
}
.rt{
margin-top:5px;
}
.rb{
margin-bottom:5px;
}
.rt *,.rb *{
display:block;
height: 1px;
overflow: hidden;
background-color:#eee;
border-left:1px solid #444;
border-right:1px solid #444;
}
.r1{
margin: 0 5px;
background-color:#444;
}
.r2{
margin: 0 3px;
border-width:0px 2px;
}
.r3{
margin: 0 2px;
}
.r4{
margin: 0 1px;
height: 2px;
}
.rb1{
margin: 0 6px;
background-color:#444;
}
.rb2{
margin: 0 4px;
border-width:0px 2px;
}
.rb3{
margin: 0 3px;
}
.rb4{
margin: 0 2px;
}
.rb5{
margin: 0 1px;
height: 2px;
}
</style>
<script>
</script>
</head>
<body>
<div id="d1">R=...</div>
<b class="rt"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b
class="r4"></b></b>
<div id="d3">
<div class="m">R=5</div>
</div>
<b class="rb"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b
class="r1"></b></b>
<b class="rt"><b class="rb1"></b><b class="rb2"></b><b class="rb3"></b><b
class="rb4"></b><b class="rb5"></b></b>
<div id="d4">
<div class="m">R=6</div>
</div>
<b class="rb"><b class="rb5"></b><b class="rb4"></b><b class="rb3"></b><b
class="rb2"></b><b class="rb1"></b></b>
</body>
</html>
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>testdiv</title>
<style>
#d1,#d3,#d4{
margin:5px 0px;
width:200px;
background-color:#eee;
}
#d1{
border:1px solid #444;
height:100px;
padding:0px 15px;
}
#d3,#d4{
margin-top:0px;
margin-bottom:0px;
border-left:1px solid #444;
border-right:1px solid #444;
}
.m{
height:100px;
width:200px;
padding:0px 15px;
position:relative;
}
#d3 .m{
margin:-4px 0px;
}
#d4 .m{
margin:-5px 0px;
}
.rt,.rb{
display:block;
width:232px;
margin-left:0px;
margin-right:0px;
}
.rt{
margin-top:5px;
}
.rb{
margin-bottom:5px;
}
.rt *,.rb *{
display:block;
height: 1px;
overflow: hidden;
background-color:#eee;
border-left:1px solid #444;
border-right:1px solid #444;
}
.r1{
margin: 0 5px;
background-color:#444;
}
.r2{
margin: 0 3px;
border-width:0px 2px;
}
.r3{
margin: 0 2px;
}
.r4{
margin: 0 1px;
height: 2px;
}
.rb1{
margin: 0 6px;
background-color:#444;
}
.rb2{
margin: 0 4px;
border-width:0px 2px;
}
.rb3{
margin: 0 3px;
}
.rb4{
margin: 0 2px;
}
.rb5{
margin: 0 1px;
height: 2px;
}
</style>
<script>
</script>
</head>
<body>
<div id="d1">R=...</div>
<b class="rt"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b
class="r4"></b></b>
<div id="d3">
<div class="m">R=5</div>
</div>
<b class="rb"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b
class="r1"></b></b>
<b class="rt"><b class="rb1"></b><b class="rb2"></b><b class="rb3"></b><b
class="rb4"></b><b class="rb5"></b></b>
<div id="d4">
<div class="m">R=6</div>
</div>
<b class="rb"><b class="rb5"></b><b class="rb4"></b><b class="rb3"></b><b
class="rb2"></b><b class="rb1"></b></b>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
