# مباحث مرتبط با توسعه وب > طراحی وب (Web Design) >  گرد كردن گو شه هاي div ها به سه روش

## ahmadbadpey

اين روز ها ايجاد جعبه ها يا divider (جداكننده ها) يي با گوشه هاي گرد توي طراحي صفحات وب خيلي مرسومه و زيبايي خاصي به صفحه ميده . چندين راه براي اين كار وجود داره كه قبلا دوستانمان توي اين تاپيك در موردش بحث كردن و راه هاي خوبي هم پيشنهاد شده .اما من مي خوام راه هاي ساده تري رو هم پيشنهاد كنم . با هم سه روش اين كار رو بررسي مي كنيم :
*ايجاد جعبه هاي گوشه گرد با عرض و ارتفاع ثابت 
*اين ساده ترين راهه ! ما اول تصويري با گوشه هاي گرد و با عرض و ارتفاع  ثابت درست مي كنيم . و اونو به عنوان پس زمينه يه div قرار مي ديم . همچنين با CSS  ، يه padding 4 پيكسلي هم به div  مون مي ديم تا مطمئن بشيم كه متن داخل اون با border هاي عكسمون تداخل نداشته باشه . 

روي عكس زير راست كليك كرده و اونو ذخيره كنيد تا استفاده كنيم . 
اين هم كد HTML و CSS ش :


```
<div style="background-image: url('/sites/default/files/rounded_fixed.gif'); width: 228px; height: 160px; padding: 10px;">
	Some content. Some content. Some content.
	Some content. Some content. Some content.
	Some content. Some content. Some content.
</div>
```

اين هم نتيجه :
نكته : اين راه ساده و سريعيه . اين براي وقتايي به كار مي آد كه  محتواي div ما ثابت باشه و تغيير نكنه . در غير اين صورت ممكنه متنمون از div مون بزنه بيرون و كار رو خراب كنه .

*ايجاد جعبه هاي گوشه گرد با عرض ثابت و ارتفاع متغير 
*توي اين روش ما از دو تا عكس براي بالا و پايين جعبه مون استفاه مي كنيم . همچنين از يه div كه قراره محتوي متن ما باشه استفاده مي كنيم . براي اين div از خاصيت border براي كشيدن خطوط حاشيه چپ و راست استفاده مي كنيم . 
دو تا عكس زير رو ذخيره كنيد . 

و

اين هم كد CSS :


```
<div style="width: 248px;">
	<div style="background-image: url('/sites/default/files/rounded_top.gif'); height: 20px;"></div>
	<div style="border-left: 2px solid #B5B5B5; border-right: 2px solid #B5B5B5; padding: 10px;">
		Some content. Some content. Some content.
		Some content. Some content. Some content.
		Some content. Some content. Some content.
	</div>
	<div style="background-image: url('/sites/default/files/rounded_bottom.gif'); height: 20px;"></div>
</div>
```

اين هم نتيجه :
دقت كنيد كه عرض و رنگ border مربوط به div وسطي رو همرنگ border عكس هاي بالا و پايين انتخاب كنيد . براي ست شدن !!! اگه شما از عكس هاي ديگه اي براي بالا و پايين استفاده كنيد مجبوريد از كد CSS متفاوتي براي div وسطي استفاده كنيد . 

اين روش يه كم از روش قبلي كامل تره . چون ما مي تونيم ازش براي محتواي متغير استفاده كنيم .

*ايجاد جعبه هاي گوشه گرد بدون استفاده از تصاوير 
*الان مي خوام طريقه ايجاد همون div ها رو بدون استفاه از تصاوير و فقط به كمك CSS و HTML توضيح بدم . 
ما از چند تا div كمكي براي ايجاد گوشه هاي گرد استفاده خواهيم كرد . تصوير زير موقعيت و كار هر يك از اون ها رو نشون مي ده . 

همونطور كه مي بينين اون قسمت هايي از جعبه مون كه قراره گوشه هاي گرد رو تشكيل بدن به چند خط كه هر خط در واقع يه div با خاصيت هايي از css هست تقسيم شده . (به شش خط بالا و پايين توي شكل نگاه كنيد .)
ما از مقادير متفاوتي براي خصوصيت margin براي هر شش div به منظور شكل دادن و تنظيم پيچ گوشه ها استفاده مي كنيم .

خط اول يه div هست كه خاصيت margin-left و margin-right اون برابر 6 ، background-color اون برابر black  و height اون برابر 1px هستش .
خط دوم هم به همين شكل اما با margin كمتر . بقيه  div ها هم به همين رواله . 
اين كد كامل رو امتحان كنيد و حاصل رو ببينيد . 


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.round_corners .line_1,
.round_corners .line_2,
.round_corners .line_3,
.round_corners .line_4,
.round_corners .line_5 {
	line-height: 0px;
	font-size: 1px;
	overflow: hidden;
}

.round_corners .line_1 {
	margin-left: 6px;
	margin-right: 6px;
	background-color: black;
	height: 1px;
}

.round_corners .line_2 {
	margin-left: 4px;
	margin-right: 4px;
	border-left: 2px solid black;
	border-right: 2px solid black;
	height: 1px;
}

.round_corners .line_3 {
	margin-left: 3px;
	margin-right: 3px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	height: 1px;
}

.round_corners .line_4 {
	margin-left: 2px;
	margin-right: 2px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	height: 1px;
}

.round_corners .line_5 {
	margin-left: 1px;
	margin-right: 1px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	height: 2px;
}

.round_corners .content {
	border-left: 1px solid black;
	border-right: 1px solid black;
	padding: 10px;
}
</style>
</head>
<body>
<div class="round_corners">
	<div class="line_1"></div>
	<div class="line_2"></div>
	<div class="line_3"></div>
	<div class="line_4"></div>
	<div class="line_5"></div>
	<div class="content">Content</div>
	<div class="line_5"></div>
	<div class="line_4"></div>
	<div class="line_3"></div>
	<div class="line_2"></div>
	<div class="line_1"></div>
</div>
</body>
</html>
```

شما مي تونيد با افرايش دادن تعداد div ها و كلاس هاي متناظرشون ميزان گرد بودن گوشه ها رو كنترل كنيد . يا مي تونيد با كم كردن تعداد div ها به 5 يا كمتر از حجم كدتون كم كنيد .

البته روش هايي زيادي براي اين كار هست كه دوستان توي اون تاپيك بهش اشاره كردن . يكي از اينها خاصيتي است كه به CSS3 اضافه شده به نام border-radius كه وظيفه اش گرد كردن گوشه هاي div هستش كه دوتا مقدار طولي مي گيره  . مقدار اول طول شعاع افقي و مقدار دوم طول شعاع عمودي يه بيضي فرضي در هر چهار گوشه رو كنترل مي كنه . براي اطلاعات بيشتر به اينجا مراجعه كنيد .

----------


## YOUCOMCO

سلام
من توی یکی از تاپیک ها یه روش جالب و راحت نوشتم که انعطاف پذیریش بیشتر باشه:
https://barnamenevis.org/showpo...00&postcount=5

البته جسارت نباشه ها

----------


## cybercoder

http://www.dhtmlgoodies.com/index.ht...ounded-corners

----------


## ahmadbadpey

با احترام به دوستان که روش های دیگه ای رو هم پیشنهاد دادن .
اما مزیت روشی که من مطرح کردم اینه که می تونیم برای *div* هایی که ایجاد می کنیم *border* هم تعیین کنیم که در بقیه روش ها این امکان وجود نداره .

----------


## میلاد قاضی پور

ضمن تشکر از همه اینم روش من . بسیار ساده و بدون نیاز به تصاویر حجیم . البته اینجا برای ساخت تکس باکس توضیح داده شده که فرقی نمیکنه همه جا این روش کاربرد داره . https://barnamenevis.org/showpo...90&postcount=4

----------


## میلاد قاضی پور

در اکثر سایتها از این روش استفاده میشه . مثل سایتهای گوگل و .. البته همه ی این روشها  یکی هستن و تفاوت ریشه ای با هم ندارن

----------


## Mah

با سلام بر همه دوستان .
در CSS3 می توانید از کد ذیل هم استفاده نمائید .

-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;

----------


## mtchabok

سلام
می خواستم بدونم که CSS3 رو کدوم مرورگرها و کدوم نسخه هاش پشتیبانی می کنن . تا بشه از این کدهایی که گفتین استفاده کرد ؟

----------


## Mah

به طور کلی IE 9.0 - FF 3. - Opera 9. 
حتی توی تصویری که از سایت w3schools گرفتم می تونید ببینید .
browserCSS3.JPG
جدول ذیل را مطالعه نمائید :Browser CSS 3 features.zip

----------


## mohammad-gh

با سلام و خسته نباشید حضور دوستان به خصوص آقای  ahmadbadpey
وقتی می خواهم از جدول دور گرد شما با روش سوم در یک فایل PHP استفاده کنم اونطور که باید خوب در نمیاد 
 در حالیکه همین کدها در یک صفحه HTML به درستی کار می کنه, یعنی گوشه ها اونطور که تو صفحه html هست درست در نمیاد
اگر به تصاویری که گذاشتم نگاه کنید متوجه می شوید:
نتیجه در صفحه ای که با پسوند html ذخیره شده
htmlpage.jpg
نتیجه در صفحه ای که با پسوند PHPذخیره شده
phppage.jpg

----------

