การใช้ div สร้าง round-corner แบบ dynmic

จาก WikiBall

หลังจากค้นหาข้อมูลอยู่หลายครั้งในการทำ round-corner ให้กับเวปไซต์ ส่วนมาก round corner ที่ใช้กันจะเป็นแบบ static คือกำหนดความยาวรูป และกล่องมาเลย ทำให้ไม่ยืดหยุ่นในการใช้งาน แต่ถ้าเป็นแบบ dynamic ที่สามารถยืดหดกล่องได้และทำโดยใช้ div และ css จะทำได้ยากมากเพราะติดปัญหาเรื่อง cross browser โดยเฉพาะการแสดงผลใน MSIE จะมีปัญหามาก เนื่องจากไม่ค่อยแสดงผลตามแบบ w3c สักเท่าไหร่ และโดยเฉพาะเจ้า MSIE6 มีปัญหา bug ที่เกี่ยวกับ css มากอยู่พอสมควร เช่น ปัญหา [3px-jog] ซึ่งทำให้การออกแบบบางลักษณะไม่ได้

การใช้ css ของ Mozzilla

• -moz-border-radius-bottomleft sets the rounding for the bottom-left curve.
• -moz-border-radius-bottomright sets the rounding for the bottom-right curve.
• -moz-border-radius-topleft sets the rounding for the top-left curve.
• -moz-border-radius-topright sets the rounding for the top-right curve.

ข้อดีคือ

• ทำง่าย
• ใช้ bandwidth และ connection น้อย

ข้อเสีย

• ใช้ได้ไม่ครบทุก browser แน่นอนว่า MSIE ใช้ไม่ได้แน่นอน

https://developer.mozilla.org/en/CSS/-moz-border-radius

การใช้ DIV+CSS

HTML

<div id="box">
  <div class="border-top"></div>
  <div class="border-topleft"></div>
  <div class="border-topright"></div>
  <div class="border-left"></div>
  <div class="border-right"></div>
  <div class="border-bottom"></div>
  <div class="border-bottomleft"></div>
  <div class="border-bottomright"></div>
  <div class="content">
    /* Type your content */
  </div>
</div>

CSS

@charset "utf-8";
/* CSS Document */

#box {
	position: relative;
	/* Replace the border image size here */
	margin: 12px 12px 12px 12px;
	/*
	 * Don't use padding here because IE6 is render incorrectly
	 * Padding shoud be in ".content"
	 */
}

#box .content {
	padding: 4px;
}

.border-top,
.border-bottom,
.border-topleft,
.border-left,
.border-bottomleft,
.border-topright,
.border-right,
.border-bottomright {
	position: absolute;
}

.border-top,
.border-bottom {
	left: 0px;
}

.border-topleft,
.border-left,
.border-bottomleft {
	left: -12px;
	width: 12px;
}

.border-topright,
.border-right,
.border-bottomright {
	right: -12px;
	width:  12px;
}
.border-top,
.border-topleft,
.border-topright {
	top:   -12px;
	height: 12px;
}

.border-bottom,
.border-bottomleft,
.border-bottomright {
	bottom: -12px;
	height:  12px;
}

.border-top, .border-bottom {
	width: 100%;
}
.border-left, .border-right {
	top: 0px;
	bottom: 0px;
	height: 100%;
	/* IE6 fix the 100% bug */
	_height: expression(eval(this.parentNode.clientHeight) + "px");
}

/* replace the border images link here */
.border-top         { background: URL(../images/greenHorizontal.gif) repeat-x top; }
.border-topleft     { background: URL(../images/greenCorner.gif) no-repeat left top; }
.border-topright    { background: URL(../images/greenCorner.gif) no-repeat right top; }
.border-left        { background: URL(../images/greenVertical.gif) repeat-y left; }
.border-right       { background: URL(../images/greenVertical.gif) repeat-y right; }
.border-bottom      { background: URL(../images/greenHorizontal.gif) repeat-x bottom; }
.border-bottomleft  { background: URL(../images/greenCorner.gif) no-repeat left bottom; }
.border-bottomright { background: URL(../images/greenCorner.gif) no-repeat right bottom; }

การใช้ css ของ Mozzilla

• -moz-border-radius-bottomleft sets the rounding for the bottom-left curve.
• -moz-border-radius-bottomright sets the rounding for the bottom-right curve.
• -moz-border-radius-topleft sets the rounding for the top-left curve.
• -moz-border-radius-topright sets the rounding for the top-right curve.

ข้อดีคือ

• ใช้ได้ทุก browser

ข้อเสีย

• เขียน css ยุ่งยาก
• ต้องเปิด connection เพื่อโหลดรูปเพิ่มอีก 3 รูป