emad_67
دوشنبه 09 دی 1387, 20:43 عصر
من میخواستم بدونم چگونه میشود با CSS مثل این فایل login ضمیمه شده ایجاد نمود.یکی از راه هایی که وجود داره و عام ترین راه هم هست استفاده از تصاویر هست که که در background قرار میگیره که جناب tarhebartar (http://barnamenevis.org/forum/member.php?u=56432) هم بهش اشاره کردند.
اما با css و html هم میشه همیچین چیزی رو در اورد. مثلا:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
.roundborder
{
height: 1px;
background-color: #b0c4de;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
.row1
{
margin: 0 12px;
background-color: #000;
}
.row2
{
margin: 0 9px;
border-width: 0 3px;
}
.row3
{
margin: 0 7px;
border: 0 2px;
}
.row4
{
margin: 0 6px;
}
.row5
{
margin: 0 5px;
}
.row6
{
margin: 0 4px;
}
.row7
{
margin: 0 3px;
}
.row8
{
margin: 0 2px;
height: 2px;
}
.row9
{
margin: 0 1px;
height: 3px;
}
.content
{
height: 100px;
padding: 20px;
}
</style>
</head>
<body>
<div class="roundborder row1"></div>
<div class="roundborder row2"></div>
<div class="roundborder row3"></div>
<div class="roundborder row4"></div>
<div class="roundborder row5"></div>
<div class="roundborder row6"></div>
<div class="roundborder row7"></div>
<div class="roundborder row8"></div>
<div class="roundborder row9"></div>
<div class="roundborder content">
test
</div>
<div class="roundborder row9"></div>
<div class="roundborder row8"></div>
<div class="roundborder row7"></div>
<div class="roundborder row6"></div>
<div class="roundborder row5"></div>
<div class="roundborder row4"></div>
<div class="roundborder row3"></div>
<div class="roundborder row2"></div>
<div class="roundborder row1"></div>
</body>
</html>
در روش بالا تعدادی div رو در هر سطر قرار میدیم که هر کدوم نسبت به قبلی یه مقدار داخل تر قرار میگیرن و ارتفاع هر div هم 1 پیکسل است. در کنار همدیگه اینا گوشه گرد رو می سازن. از این روش در صفحاتی که تعدادی div با گوشه کرد درشون زیاد هست نباید استفاده کرد چون حجم صفحه رو خیلی بالا میبره.
خصوصیت moz-border-radius- هم توسط firefox پشتیبانی میشه که همین کار رو میکنه:
-moz-border-radius: 20px;
خصوصیات برای گرد کردن گوشه های خاص:
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
-moz-border-radius-topleft
کلا میشه جلوه های قشنگی رو در اورد باهاش.
این تو یه سایت دیده بودم:
http://www.the-art-of-web.com/images/moz-border-radius.gif
اما متاسفانه فعلا همش مال firefox هست.
border-radius خاصیتی مال css3 هست که فعلا روی opera , ie , ff پشتیانی نمیشه.