Cho hỏi cách là bo tròn góc của 1 khung

[zoejoe]

Hi các bạn. Mình không rành về design lắm nên có chút thắc mắc :
Có cách nào làm bo tròn 1 khung không ?? Giống như trên thế giới di động (lúc xem sản phẩm ). Không biết có phải dùng css hay dùng đồ họa ??? Nếu dùng đồ họa vẽ thì ai đó cho mình xin cái hình.

Thanks các bạn nhiều

[phamduyvt]

dùng photoshop vẽ 1 cái hình có 4 góc
sau đó dùng công cụ cắt lác cắt 4 góc đó ra, rồi lưu lại dạng htm

[trhthong]

Làm như bạn Phamduyvt làm cũng được. Đó là cách cực kỳ dễ làm mà "gà" cỡ như... tui thì có khả năng làm được. Tuy nhiên, bạn hoàn toàn có thể dùng CSS cho trường hợp này. Tôi xin đưa ra cho bạn kỹ thuật gọi là "Kỹ thuật 4 div" để tạo một khung có 4 góc bo tròn:
1. Bạn dùng "photoshop" để tạo nên một hình khối có 4 góc bo tròn.
2. Cắt hình này thành 4 hình tương ứng với 4 góc.
3. Trong code html, bạn viết như sau:

<div class="boxwrap">
<div>
<div>
<div>
Nội dung bên trong khối có 4 góc bo tròn...
</div>
</div>
</div>
</div>
Bạn có thầy là ta dùng 4 thẻ div lồng nhau không? Đó là lý do tại sao đây được gọi là kỹ thuật 4div đó ^^.

4. Còn trong phần CSS, ta định dạng như sau:

div.boxwrap {
margin: 50px auto 0;
padding: 0;
background: url(images/br.gif) no-repeat right bottom;
width: 15%;
color: #FFF;
}

div.boxwrap div {
background: url(images/bl.gif) no-repeat left bottom;
}

div.boxwrap div div {
background: url(images/tr.gif) no-repeat right top;
}

div.boxwrap div div div {
background: url(images/tl.gif) no-repeat left top;
padding: 20px;
}

[Spirit]

chà, tiến bộ ghê vậy anh Thông ) kĩ thuật 4 div nữa hihi

[trhthong]

hì hì... Học lỏm bên cssyeah đó. Còn cssyeah thì học lỏm ở đâu đó trong w3schools thì phải... ^^

[temp_304]

bo tròn góc của 1 khung = JS + CSS, NO IMAGE, NO PICTURE

[zoejoe]

bo tròn góc của 1 khung = JS + CSS, NO IMAGE, NO PICTURE

Thank you. Nhưng sao code nó lại phức tạp đến thế nhỉ ?? Style position toàn adsolute thì hơi khó để chỉnh sửa

Cảm ơn anh Thông đã chỉ và cũng cho em thêm 1 chỗ chỉ CSS nữa. Cảm ơn anh nhiều nha !

[tuanhn]

Ủa bo tròn 4 góc thì phải cần tới 8 hình chứ sao 4:top-left,top-bar,top-right,leftbar,rightbar,bottom-left,bottom-bar,và bottom-right

[trhthong]

bo tròn góc của 1 khung = JS + CSS, NO IMAGE, NO PICTURE

Xin lỗi anh bạn TEMP_304, vì mình "dở" lắm, học javascript hổng được nên dùng tạm CSS với mấy cái hình, nhẹ nhàng làm thôi. Cảm ơn bạn đã chỉ cho mình chỗ... nói là dùng Javascript để làm. Xin nói thêm là: Cho đến thời điểm hiện tại nếu bạn muốn vẽ một khung bo tròn 4 góc mà không dùng tới javascript thì chỉ có một kỹ thuật duy nhất đó là kỹ thuật 4 div. (Trích từ cssyeah.com)

Ủa bo tròn 4 góc thì phải cần tới 8 hình chứ sao 4:top-left,top-bar,top-right,leftbar,rightbar,bottom-left,bottom-bar,và bottom-right

Ừ mà quên, bạn không thấy ví dụ thì khó hiểu lắm.
Tải ví dụ ở đây hen.
Nếu bạn hiểu rồi, thì hoàn toàn có thể mở rộng ra cho 8 hình, nếu muốn (hình như làm khó hơn, với lại không còn là "4div" nữa đâu). Thực ra, 4div không khó lắm đâu. ^=^

[noomrm]

xem cái source quảng cáo của GA xem, tắt hình đi nó vẫn có 4 góc tròn như thường