使用div创造一个矩形框是圆边的_谁能给我写一段将div布局把矩形框的边角弄成圆的不要是尖的角要圆的用css样式写的

⑴ 问下div css怎么做网站的边框圆角

div+css实现圆角边框，在网络上查看了一下，很多都是实现圆角的矩形的方法，我在这里介绍的是实现圆角矩形边框的方法。

用代码说明问题：

<html>
<head>
<style>
#a{
border-left:1px #333 solid;
border-right:1px #333 solid;
width:300px;
height:500px;
}
.b{
height:1px;
overflow:hidden;
border-left:1px #333 solid;
border-right:1px #333 solid;
}
</style>
</head>
<body>
<div>
<div class="b" style="margin-left:3px;width:294px;background:#333"></div>
<div class="b" style="margin-left:2px;width:296px;"></div>
<div class="b" style="margin-left:1px;width:298px"></div>
<div id="a">

以我的能力，纯DIV+CSS实现的效果只能做到这样了。这里是放置内容的地方，自己看一看代码的规律，很容易明白。<br/>
代码很简单，a层为放置内容的层，其width值为300，然后向外以2像素的宽度递减。最外一层要加上background为个属性，目的是要将上、下两线条呈现出来。<br/>

这里实现了3像素的圆角边框，b层的数量决定了要实现多少个像素边框。建议不要多于3层，最好是2层，即2像素圆角边框，或者1层，因为层数越多，圆角的表现就越不圆滑。在firefox IE6 都通过测试。

</div>
<div class="b" style="margin-left:1px;width:298px"></div>
<div class="b" style="margin-left:2px;width:296px;"></div>
<div class="b" style="margin-left:3px;width:294px;background:#333"></div>
</div>
</body>
</html>

⑵ 在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+css如何实现圆角矩形

具体操作步骤如下：

1、首先打开sublime text软件，新建一个html文件，输入基本的html结构：

⑷ 怎么设置CSS属性让div的边框是圆角矩形

#div{
width:100px;
height:100px;
background:#000000;

//设置弯曲程度，当然也可以分别设置；比如只设置左下角：border-bottom-left-radius:10px;
border-radius:10px;
}

⑸ 怎样使得整个DIV边框是圆角

用CSS样式吧，比js好
有的浏览器会禁止执行脚本，那样就无效了
CSS就不会

<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFFFFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>

<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
无图片实现圆角框
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<br>

<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>

⑹ 怎么把DIV变成一个圆

1、【第一步】打开Dreamweaver cc 2014软件，选择建立html界面，里面自动生成一些必要代码的代码格式，不需再浪费时间去写。

⑺ 谁能给我写一段将div布局，把矩形框的边角弄成圆的，不要是尖的角，要圆的，用css样式写的

在css里加如下的代码：
border: 5 solid gray;
border-radius:10px;

如过你不想要边框，去掉 border: 5 solid gray;就行了。
注意：Firefox 3.5,Firefox 3.0,Safari 3.1,Chrome 2.0.x,Chrome 1.0.x可用

⑻ div css圆角边框怎么设置

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

结果如下：

2 .图片圆角也是一样的：

css代码：

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

html代码：

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创造一个矩形框是圆边的

与使用div创造一个矩形框是圆边的相关的资料