View Full Version : Cho hỏi cách là bo tròn góc của 1 khung
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 :D). 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 :D
phamduyvt
28-03-2008, 11:08
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
29-03-2008, 00:25
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;
}
chà, tiến bộ ghê vậy anh Thông ;)) kĩ thuật 4 div nữa hihi
trhthong
29-03-2008, 15:54
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
29-03-2008, 16:11
bo tròn góc của 1 khung = JS + CSS, NO IMAGE, NO PICTURE (http://www.javascriptbank.com/javascript/css/curvyCorners.php)
bo tròn góc của 1 khung = JS + CSS, NO IMAGE, NO PICTURE (http://www.javascriptbank.com/javascript/css/curvyCorners.php)
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 :D
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 !
Ủa bo tròn 4 (http://hieukinhquangthai.com) 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
30-03-2008, 11:49
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 (http://www.cssyeah.com/downloads/4divs.zip) 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. ^=^
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
phongjalvn
30-03-2008, 15:23
Cách của bạn trhthong cũng hay, đây là 1 cách khác để các bạn tham khảo :
http://www.webdesignerwall.com/tutorials/css-the-all-expandable-box/
Thật ra cách này cũng không phải là mới, mà dựa vào kĩ thuật slicing door thôi, nhưng ý tưởng thì rất hay
Cách của bạn trhthong cũng hay, đây là 1 cách khác để các bạn tham khảo :
http://www.webdesignerwall.com/tutorials/css-the-all-expandable-box/
Thật ra cách này cũng không phải là mới, mà dựa vào kĩ thuật slicing door thôi, nhưng ý tưởng thì rất hay
Anh gì ơi, em làm được rồi, rất ổn trên Firefox, nhưng với IE thì thua : http://zhome.info/test/11/
Thiệt là khó hiểu và bực mình. Đúng là IE nó chơi khác người !
phongjalvn
30-03-2008, 23:11
Anh gì ơi, em làm được rồi, rất ổn trên Firefox, nhưng với IE thì thua : http://zhome.info/test/11/
Thiệt là khó hiểu và bực mình. Đúng là IE nó chơi khác người !
Hà hà, lỗi là phải rồi, do bạn canh margin không đúng đó :D
trhthong
31-03-2008, 02:48
Có lẽ bạn nên đọc qua thử kỹ thuật Slicing Door như thế nào...
Bạn VÀO ĐÂY (http://www.cssyeah.com/ky-thuat-slicing-door-va-ung-dung.html) để tham khảo nghen (yên tâm, tiếng Việt đó). ^_^
Xin đóng góp thêm là, cách bạn làm, không hay bằng kỹ thuật tớ đã giới thiệu đâu. Để mình sửa cái code của bạn xem sao... Còn nói thiệt tình thì, mình chỉ biết làm CSS thôi (kiểu làm mò hoài cũng ra), còn hiểu nó như thế nào, mình còn kém lắm. Có gì bạn hỏi cái tên Spirit đó (tớ cũng học hỏi chỗ ổng nhiều). Hỏi tớ về C++ (tương lai là C#) thì có lẽ được đấy | .^_^. | Còn CSS, học cho "vui" thôi hà... Chẳng biết để làm gì. Có lẽ để hoc lại môn Thiết kế Web.. hì hì..
phongjalvn
31-03-2008, 08:56
Đúng là kĩ thuật trên bị một số giới hạn, như: box có thể kéo dãn, nhưng chỉ đến 1 giới hạn nhất định thì sẽ bị bể ( giới hạn đó là kích thước tấm hình background)
Nhưng về mặt hay so với kĩ thuật 4 div của bạn là tiết kiệm được lượng HTTP-request.
Tuy nhiên cũng phải bàn thêm. Thật ra, kĩ thuật này là lai giữa 4 div và slicing door, ai chịu khó nghiền ngẫm sẽ thấy thôi :D
À hà, mà tiện đây, mình đang làm 1 tut, sử dụng 1 kĩ thuật khác để bo góc, kĩ thuật này phát triển từ ý tưởng slicing door, tuy nhiên nó làm được những điều mà slicing door và cách của bạn không làm được :D ( Trick 1 chút )
Hà hà, lỗi là phải rồi, do bạn canh margin không đúng đó :D
Anh chụi khó sửa lại cho em đi :D
Em đã thử chỉnh margin rồi thì nó lại hư bên FF !!
phongjalvn
31-03-2008, 14:02
Anh chụi khó sửa lại cho em đi :D
Em đã thử chỉnh margin rồi thì nó lại hư bên FF !!
:-? kì vậy ta, bạn thử cái này nhé
body {
font-family: Verdana;
font-size: 11px;
}
.box {
width: 500px;
margin: 40px auto;
}
.box div.topleft {
display: block;
background: url("box-bg.png") top left no-repeat white;
padding: 20px 0 0 20px;
}
.box div.topright {
display: block;
background: url("box-bg.png") top right no-repeat white;
padding: 25px 30px 25px 0;
margin: -20px 0 0 10px;
}
.box div.topright>div{
text-align:justify;
padding:20px;
}
.box div.bottomleft {
display: block;
height: 20px;
margin-top: -20px;
background: url("box-bg.png") bottom left no-repeat white;
}
.box div.bottomright {
display: block;
background: url("box-bg.png") bottom right no-repeat white;
height: 20px;
margin-left: 30px;
}
<div class="box">
<div class="topleft">
<div class="topright">
<div> Đây là cách bo tròn đường viền bao quanh box, tuy nhiên, nó không hoạt động tốt trên IE 7, và cũng có thể là IE 6,5. IE thật là khó chịu Đây là cách bo tròn đường viền bao quanh box, tuy nhiên, nó không hoạt động tốt trên IE 7, và cũng có thể là IE 6,5. IE thật là khó chịu Đây là cách bo tròn đường viền bao quanh box, tuy nhiên, nó không hoạt động tốt trên IE 7, và cũng có thể là IE 6,5. IE thật là khó chịu </div>
</div>
</div>
<div class="bottomleft">
<div class="bottomright"></div>
</div>
</div>
Mình có tweak lại code chút xíu, để bạn có thể format khoảng cách của content ở trong, bạn chỉ việc change padding của cái .box div.topright>div là ok ;). Chúc thành công ( cái tweak này sẽ không work trên Ie 6 đâu nhé ;) do mình xài child selector, các phần khác ổn cả)
P/S: hạn chế dùng inline CSS nhé bạn. Kĩ thuật này mình cũng dùng ở 1 số trang của mình http://www.jt-vn.com/demo/ ( Trang này là demo cho 1 bài tut đang hướng dẫn của mình thôi, không phải trang cho khách hàng, bài tut này sẽ có trong vài ngày tới ;) )
Em nghĩ mình có thể sử dụng table 3x3 thay cho div sẽ dễ hơn đó anh. Table này sẽ đặt trong một div, như thế sẽ đơn giản hơn rất nhiều.
Demo : http://zhome.info/test/11/
Code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
</head>
<link href="style.css" media="screen" rel="stylesheet" rev="stylesheet" type="text/css" />
<!-- css style -->
<body>
<div align="center">
<table width="920" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10" height="22" class="topleft"> </td>
<td width="237" class="top"> </td>
<td width="10" height="22" class="topright"> </td>
</tr>
<tr>
<td class="left"> </td>
<td class="content"><p><strong>Content something here ! </strong></p> </td>
<td class="right"> </td>
</tr>
<tr>
<td width="10" height="22" class="bottomleft"> </td>
<td class="bottom"> </td>
<td class="bottomright"> </td>
</tr>
</table>
</div>
</body>
</html>
CSS :
body {
font-family: Verdana;
font-size: 11px;
}
.topleft {
border: none;
height: 22px;
width: 10px;
background: url(topleft.png) no-repeat 16px -1px;
}
.topright {
border: none;
background: url(topright.png) no-repeat 0px -4px;
height: 22px;
width: 10px;
}
.bottomleft {
border: none;
background: url(botleft.png) no-repeat 15px -1px;
height: 22px;
}
.bottomright {
border: none;
height: 22px;
background: url(botright.png) no-repeat -2px -3px;
}
.top {
border: none;
background: url(top.png) repeat-x top;
height: 22px;
}
.bottom {
border: none;
height: 22px;
background: url(bottom.png) repeat-x 0px 5px;
}
.right {
border: none;
width: 10px;
background: url(right.png) repeat-y 7px 0px;
}
.left {
border: none;
width: 10px;
background: url(left.png) repeat-y 15px 0px;
}
.content {
font-family:Verdana, Arial, Helvetica, sans-serif;
padding: 1px;
text-align: center;
}
trhthong
01-04-2008, 00:06
Nè bạn zoejoe à, mình đang thảo luận về CSS. Bạn có thấy là việc dùng table của bạn phức tạp hơn dùng CSS không? Với lại, nếu cứ dùng table cho "đơn giản", thì việc thiết kế web theo phong cách tabless biết chừng nào mới phổ biến ở Việt Nam đây? Nước ngoài, họ toàn dùng CSS thôi đó!
Tất nhiên, dùng table sẽ dễ hiểu hơn dùng CSS, nhưng trong tương lai, CSS sẽ thống trị thôi, vì đó là một công nghệ hiện đại mà.
Tương lai của CSS (Chăm Sóc Sức khỏe) ở VN sẽ rất CSS (Có Sức Sống).
Ở mấy forum hay có mấy vụ kiểu này nhỉ :D
DOT NET vs Java
CSS vs Table
Bo góc 1 vs Bo góc 2
........
Câu trả lời chỉ có 1: hiểu rõ từng cái để biết khi nào dùng cái gì.
Súng lục đâu phải lúc nào cũng hay hơn dao.
Súng lục cũng đâu phải lúc nào cũng sài được thay ... tên lửa.
Quay lại bài viết, thử search: CSS rounded corner là ra 1 tá bài, 1 tá cách bo góc :D
Ví dụ link đầu:
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
(25 cách nhé)
phongjalvn
01-04-2008, 09:21
Thật ra cách bo góc mà mình để link các bạn tham khảo chỉ là 1 trong vô vàn cách mà thôi.
Còn nếu bạn zoezoe sử dụng table, đúng là đơn giản hơn, nhưng ... bạn xem code của bạn và so với code của mình xem. Rõ ràng bạn dư quá nhiều tag thừa, và hơn nữa về mạt kĩ thuật rõ ràng bạn sai : table dùng để hiển thị dữ liệu, không phải dùng để trình bày giao diện
Thật ra cách bo góc mà mình để link các bạn tham khảo chỉ là 1 trong vô vàn cách mà thôi.
Còn nếu bạn zoezoe sử dụng table, đúng là đơn giản hơn, nhưng ... bạn xem code của bạn và so với code của mình xem. Rõ ràng bạn dư quá nhiều tag thừa, và hơn nữa về mạt kĩ thuật rõ ràng bạn sai : table dùng để hiển thị dữ liệu, không phải dùng để trình bày giao diện
Hì hì, em chỉ làm thử thôi ! Dù sao thì em cũng thích CSS hơn : Đa năng và dễ chỉnh sửa. Tại bí quá, code cũ sửa hoài không xong mới nghĩ ra cách này. Mấy anh thông cảm !!
2_lua_IT
08-04-2008, 23:53
Dùng CSS thì tạm thời chưa được, đành can thiệp bằng image. Bạn chờ đi CSS3 sẽ hổ trợ nó đấy. Các bạn vào link này để xem thử nhá : http://www.w3.org/TR/2002/WD-css3-border-20021107/
trhthong
10-04-2008, 18:12
CSS3 quả thật làm cho người ta hết ngạc nhiên này đến ngạc nhiên khác. Chỉ đáng tiếc là đến giờ chúng ta vẫn chưa dùng được CSS3 thôi... ^_^
Thông thường với kỹ thuật 4 div thì ta nên dùng background lớn. 1200 x 1800px thì sẽ không bao giờ bị hụt. (save ở đuôi gif nhé. đuôi gif chỉ có 1 màu đơn sắc thì không bị kích thước lớn đâu)
2_lua_IT
11-04-2008, 10:13
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;
}
Hay wa. Nếu vậy thì cần phải tạo cái hình br.gif có kích thước thật lớn. Width thì kô nói làm j, nhưng height thì có vấn đề, làm sao biết height của giới hạng trong bao nhiêu. Làm cách khác thôi.
darkera13
12-04-2008, 09:18
Việc làm bo góc thế này nó tùy vào trường hợp cụ thể thì mới có code cụ thể được, có phải lúc nào bo góc cũng cần background, cần top, right, left, bottom đâu.
Quartermain
12-04-2008, 16:50
Hay wa. Nếu vậy thì cần phải tạo cái hình br.gif có kích thước thật lớn. Width thì kô nói làm j, nhưng height thì có vấn đề, làm sao biết height của giới hạng trong bao nhiêu. Làm cách khác thôi.
hi hi làm theo cách 4 div là chuẩn rồi. Bạn xem lại đi ko cần phải có 1 bức ảnh to đâu.
2_lua_IT
12-04-2008, 21:15
em coi rồi pác ơi, giả sử cái khung của tui có size 1000x5000px chẳng hạng, giả sử thôi. Thì pác phải có 2 hình có size ít nhất là 1000x5000px phải kô? Hay là 4 hình có size là 500x2500px. hehe. Tui nói sai kô vậy pác ? Hehe.
darkera13
13-04-2008, 12:48
em coi rồi pác ơi, giả sử cái khung của tui có size 1000x5000px chẳng hạng, giả sử thôi. Thì pác phải có 2 hình có size ít nhất là 1000x5000px phải kô? Hay là 4 hình có size là 500x2500px. hehe. Tui nói sai kô vậy pác ? Hehe.
Bác cho tôi 1 cái image có đủ 4 góc, 4 cạnh (có khả năng lặp lại) thì tôi có thể làm cho bác cái khung lớn gấp tỷ lần cái image bác đưa cho mà chả cần phải resize cái image bác đưa tôi lên tỷ lần.
Trường hợp của bác đưa ra chỉ đúng khi mà các cạnh của nó không thể repeat hoặc bg của bác là 1 cái image #.
Không ai bắt bạn phải dùng 4div trong mọi trường hợp (tôi thì chưa bao giờ dùng đến cái 4div như vd của bác nào ở trên cả), linh hoạt 1 chút thì sẽ thấy nó đơn giản hơn thế nhiều
2_lua_IT
14-04-2008, 08:35
@darkera13: hình thì chắc pác có rồi mà. Pác code rồi đó, pác post trang HTML của pác lên host luôn đi. Để thiên hạ chiêm ngưỡng đi chứ.
darkera13
14-04-2008, 15:14
@darkera13: hình thì chắc pác có rồi mà. Pác code rồi đó, pác post trang HTML của pác lên host luôn đi. Để thiên hạ chiêm ngưỡng đi chứ.
Hình thì thiếu gì, làm thì cũng làm rồi, nhưng chả cần thiết phải đưa lên, tôi chỉ nói thế để bác biết là cách làm của bác đúng nhưng mà chưa phải đúng trong mọi trường hợp?
hontruongba
14-04-2008, 23:19
Hình thì thiếu gì, làm thì cũng làm rồi, nhưng chả cần thiết phải đưa lên, tôi chỉ nói thế để bác biết là cách làm của bác đúng nhưng mà chưa phải đúng trong mọi trường hợp?
Nếu chỉ nói suông thì lên mặt trăng (http://hieukinhquangthai.com) củng là chuyện nhỏ
2_lua_IT
15-04-2008, 00:45
@darkera : hay lắm nhưng chỉ được hay nói suông thôi. Pác copy code ở đâu chưa test lại rồi đã phát biểu. Copy code thì plz ghi nguồn dùm em với.
Quartermain
15-04-2008, 02:04
<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;
}
Mình xin góp ý. Bạn viết css kiểu này nhìn thì có mà toi. Khó nhìn lắm.
Sao bạn không làm mỗi cái div là 1 style nhỉ. Thì khi soi lại có phải dễ nhìn hơn ko
trhthong
24-04-2008, 20:53
Anh làm ơn ghé qua trang cssyeah.com để tìm hiểu rõ hơn. Em chỉ đưa ra cái ý chính, còn ai đọc hiểu hay không, thì còn tùy trường hợp... Có người hiểu, có người không hiểu...
Bác cho tôi 1 cái image có đủ 4 góc, 4 cạnh (có khả năng lặp lại) thì tôi có thể làm cho bác cái khung lớn gấp tỷ lần cái image bác đưa cho mà chả cần phải resize cái image bác đưa tôi lên tỷ lần.
Trường hợp của bác đưa ra chỉ đúng khi mà các cạnh của nó không thể repeat hoặc bg của bác là 1 cái image #.
Không ai bắt bạn phải dùng 4div trong mọi trường hợp (tôi thì chưa bao giờ dùng đến cái 4div như vd của bác nào ở trên cả), linh hoạt 1 chút thì sẽ thấy nó đơn giản hơn thế nhiều
bác này nói chính xác nè... và đây là ví dụ ... muốn lớn bi nhiêu thì chỉnh cái width nhà mí cha :D
http://www.zshare.net/download/1191039181dd454d/
dangha88
01-06-2008, 22:38
Cách của bác phongjalvn hay đấy mà dễ hiểu, ở đây chỉ cần dùng 4 div là đủ, cố gắng phát huy nhé heeeeeeeeee
chào mấy bác. chứ cách bo tròn góc của mấy bác rất dở và không thích hợp. em xinh đề xuất cách mà em thường làm như sau:
- dùng ps vẽ hình trước.
- cắt thành 2 khối : khối 1 là 2 góc trên, khối 2 là 2 góc đáy.
rùi cắt như sau:
<div class="container">
<div class="top"></div>
<div style="width:200px;border-left:1px;border-right:1px;">//cái này có thể thay đổi kích thước và mày tùy sao cho khớp với hình top và bottom là được.
//noi dung here
</div>
<div class="bottom"></div>
</div>
Còn đối với dân tay mơ về designer như mình thì chỉ dùng border-radius của css3 với: -moz-border-radius và -webkit-border-radius, mặc kệ tụi Trident và Presto lol
nguyenhuong_apl
10-10-2009, 09:48
Để bo tròn 4 góc và có thể co giãn, có rất rất nhiều cách. Dưới đây là 4 cách hay dùng:
1. Dùng kỹ thuật 4 div theo cách của joomla.
<div class="jv_mod">
<div>
<div>
<div>
Content here!
</div>
</div>
</div>
</div>
Rất nhiều template joomla dùng cách này.
2. Cách 2 dùng kỹ thuật 7 div theo cách của wordpress
<div style="position: relative;" class="module">
<div class="jvmod-tl">
<div class="jvmod-tr">
<h3><span>Who's Online</span></h3>
</div>
</div>
<div class="jvmod-cl">
<div class="jvmod-cr">
<div class="jvmod-cc">
<span class="coll"/>
We have 1 guest online </div>
</div>
</div>
<div class="jvmod-bl">
<div class="jvmod-br">
</div>
</div>
</div>
3. dùng border-radius của css3. Rất tiếc mới chỉ có FireFox và Safari support cái này
4. Dùng kỹ thuật 8 div theo cách làm của joomvision.com.
http://www.joomvision.com/jv-vantage-flexible-template-for-your-site.html
Các anh có thể co giãn, set width template thoải mái mà không sợ vỡ layout, mất góc.
Cái link này chắc đủ yêu cầu của bạn:
http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml
Tiếng anh nên chịu khó đọc hoặc xem source nhé
thử sư dụng jquery corner xem sao
Đây có một video tutorial cho bạn tham khảo nè, bằng tiếng Việt. Bao gồm những cách phổ biến nhất để bo tròn góc.
http://www.izwebz.com/video-tutorials/nhung-cach-bo-tron-goc/
chimtrum
22-01-2010, 04:27
http://www.spiffycorners.com/
Một trong những cách nhanh nhất (không đảm bảo valid xHTML)
Css 3 hỗ trợ bo tròn khá đơn giản. Riêng có thằng IE là "khó nuôi" nhưng có thể xử lý riêng cho nó bằng Javascript. Các bạn có thể tham khảo thêm ở đây.
http://www.giancon.me/index.php?q=border-radius
satthudatinh011
15-10-2010, 22:09
IE9 chính thức hỗ trợ CSS3 rùi
vậy là dùng CSS3 là okie
còn dùng Jquery corner thì ko tạo đc border + phải có màu nền > bó hand
vuvanthiep
16-10-2010, 00:17
bạn có thể dùng css 3 để làm , hoăc dùng phóthop
vietdragons.com
16-10-2010, 11:10
IE9 chính thức hỗ trợ CSS3 rùi
vậy là dùng CSS3 là okie
còn dùng Jquery corner thì ko tạo đc border + phải có màu nền > bó hand
quan trọng là có ai xài ie9 hay ko
honnhienh
16-10-2010, 12:45
quan trọng là có ai xài ie9 hay ko
sao không bác. người nào mà dung win7 hoặc vista là ie89 rùi thì phải. mình vẫn còn ở mức xp
vietdragons.com
16-10-2010, 15:08
sao không bác. người nào mà dung win7 hoặc vista là ie89 rùi thì phải. mình vẫn còn ở mức xp
thì bởi, xài css3 phải xem có bao nhiu % người sử dụng thấy giao diện bị lỗi, nên hay ko nên xài kiểu cũ
Powered by vBulletin® Version 4.2.0 Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.