گرد كردن گو شه هاي div ها به سه روش

**ahmadbadpey** · دوشنبه 30 شهریور 1388, 20:47 عصر

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

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

اين هم كد HTML و CSS ش :

کد HTML:

<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 :

کد HTML:

<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 ها هم به همين رواله .
اين كد كامل رو امتحان كنيد و حاصل رو ببينيد .

کد HTML:

<!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** · جمعه 01 آبان 1388, 19:33 عصر

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

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

**cybercoder** · شنبه 02 آبان 1388, 13:39 عصر

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

**ahmadbadpey** · پنج شنبه 05 فروردین 1389, 13:08 عصر

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

**میلاد قاضی پور** · شنبه 07 فروردین 1389, 13:53 عصر

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

**میلاد قاضی پور** · شنبه 07 فروردین 1389, 13:59 عصر

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

**Mah** · سه شنبه 30 آذر 1389, 10:23 صبح

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

-webkit-border-radius: 9px;

-moz-border-radius: 9px;

border-radius: 9px;

**mtchabok** · جمعه 03 دی 1389, 15:43 عصر

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

**Mah** · شنبه 04 دی 1389, 07:39 صبح

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

**mohammad-gh** · جمعه 16 اردیبهشت 1390, 20:20 عصر

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

نام تاپیک: گرد كردن گو شه هاي div ها به سه روش

ابزار های تاپیک

نمایش

گرد كردن گو شه هاي div ها به سه روش

نقل قول: گرد كردن گو شه هاي div ها به سه روش

نقل قول: گرد كردن گو شه هاي div ها به سه روش

نقل قول: گرد كردن گو شه هاي div ها به سه روش

نقل قول: گرد كردن گو شه هاي div ها به سه روش

نقل قول: گرد كردن گو شه هاي div ها به سه روش

نقل قول: گرد كردن گو شه هاي div ها به سه روش

نقل قول: گرد كردن گو شه هاي div ها به سه روش

نقل قول: گرد كردن گو شه هاي div ها به سه روش

نقل قول: گرد كردن گو شه هاي div ها به سه روش

قوانین ایجاد تاپیک در تالار