使用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創造一個矩形框是圓邊的相關的資料