#77854 gửi bởi quickup
Ngày 12 Tháng 01 2011 , 10:14
Mình thấy trang Tạp chí Pháp lý http://phaply.net.vn/ họ toàn bo tròn góc theo nhiều kiểu khác nhau mà không hề dùng ảnh, như thế sẽ giảm tải cho trang web không phải load các ảnh nền, mình loay hoay mãi vẫn không sao làm được. Bạn nào rành về CSS kiểu này vui lòng hướng dẫn giúp.
Thanks!

Đồ họa Việt Nam | Thiết kế Logo | Thiết kế Quảng cáo | Thiết kế Tạp chí
#78037 gửi bởi mrgpt
Ngày 14 Tháng 01 2011 , 09:38
Cái này bạn search trên mạng nhiều lắm. Cách đơn giản là dùng CSS, bạn vào đây nghâm cứu :-

http://boyprodx.blogspot.com/2009/08/ta ... g-css.html

"Mỗi ngày tôi chọn đường mình đi - Đường đến anh em đường đến bạn bè..." Simply, I'm mr.gpt™ Demo Nukeviet 3.0: http://ictpleiku.net/nv3 Diễn đàn Tuổi trẻ Gia Lai: http://tuoitregialai.net/
#78755 gửi bởi quickup
Ngày 22 Tháng 01 2011 , 03:04
Mình đã tìm ra cách làm rồi, các bạn tham khảo nhé:
Thêm Style vào CSS:
#Bo-tron-anh {
background:#eeeeee;
-moz-border-radius: 10px 10px 10px 10px;
}
Màu nền và vị trí góc bo tròn bạn có thể tùy chọn
Ví dụ muốn bo 2 góc trên sẽ là: -moz-border-radius: 10px 10px 0px 0px;
muốn bo 2 góc trên sẽ là: -moz-border-radius: 0px 0px 10px 10px;
Các bạn thử xem nhé.

Đồ họa Việt Nam | Thiết kế Logo | Thiết kế Quảng cáo | Thiết kế Tạp chí
#79964 gửi bởi hpart88
Ngày 12 Tháng 02 2011 , 04:40
Bài này Mình đọc được ở trang Vietphotoshop.com của tác giả Final Fantasy , mình đã thử làm theo hướng dẫn và rất hiệu quả , Copy lại cho bạn cùng nghiên cứu nhé !

Tạo khung có các góc bo tròn
Người đăng: Final Fantasy
Gửi ngày 12 Tháng 4, 2008

Bài viết này sẽ hướng dẫn các bạn làm một khung có các góc bo tròn mà ko cần hình ảnh.

Giờ chúng ta sẽ bắt đầu. Trước hết hãy tạo 1 file htm đơn giản, thêm đoạn sau vào phần <head>


CODE
<style type="text/css">

div#goctron{ margin: 0 10%;background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>


kế đến thêm phần sau vào <body> hãy để ý phần css phía trên ở chỗ div#goctron và phần <div id="goctron".....> ở dưới đây



CODE

<div id="goctron" align="center">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>Chu~ cu?a ba.n o? day !!</h1>

<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>




Giải thích:
(Cái này chỉ giải thích theo cách hiểu của FM nếu có gì sai mong bỏ qua)
ở đây dùng <b> như một cách để insert những phần mình đã edit trong css, thay vì phải dùng span. Nếu để ý các ban sẽ thấy các phần <b class="x"> được sắp xếp liên tiếp nhau mà mỗi <b class="x"> như thế sẽ tương ứng cho b.rx trong phần CSS (x ở đây là các số tương ứng)

r1 sẽ "thụt" xuống 5px từ "rtop"

vì (xem trong đoạn html)


CODE
<b class="rtop"><b class="r1">


tương tự thế, r2 sẽ thụt xuống 3px từ "rtop"
r3 thụt xuống 2px v.v. cứ thế, sắp xếp liên tiếp nhau sẽ tạo thành một góc tròn như chúng ta thấy

Chúc vui vẻ

© Fantomas - Vietphotoshop.com
Biên tập: heodat - vietphotoshop.com
#87022 gửi bởi davidquoc
Ngày 25 Tháng 05 2011 , 03:56
Bạn chỉ cần thêm đoạn mã vào border mà bạn muốn bo tròn
border-bottom-right-radius : 10px; /*Góc dưới phải */
border-bottom-left-radius : 10px; /*Góc dưới trái*/
border-top-right-radius: 10px; /*Góc trên phải*/
border-top-left-radius:10px; /*Góc trên trái*/
border-radius:10px; /*bốn góc*/
bạn có thể thay đổi 10px tuỳ thích.
demo : http://tadz.net

Email : quocdoan419@gmail.com
Phone : 0909 115 419
website: http://vndes.net
Video : http://video.vndes.net
tin khoa học : http://khoahoc.asia
#112257 gửi bởi right
Ngày 02 Tháng 04 2012 , 00:54
Dùng css để bo tròn góc ngoài dùng ảnh với sử dụng css 3 như trên thì còn mẹo 4 div với mỗi div là 1 hr và width của mỗi div tăng hoặc giảm theo 1 tỉ lệ nhất định.
Lưu ý: bo góc dùng css3 sang ie8- mất thiêng ^^

I'm Right .
Website demo: http://sangohoaphat.com
Hiện đang SEO: http://sangohoanganh.com
#125822 gửi bởi thanhvuanhvu
Ngày 01 Tháng 10 2012 , 21:54
davidquoc đã viết:Bạn chỉ cần thêm đoạn mã vào border mà bạn muốn bo tròn
border-bottom-right-radius : 10px; /*Góc dưới phải */
border-bottom-left-radius : 10px; /*Góc dưới trái*/
border-top-right-radius: 10px; /*Góc trên phải*/
border-top-left-radius:10px; /*Góc trên trái*/
border-radius:10px; /*bốn góc*/
bạn có thể thay đổi 10px tuỳ thích.
demo : http://tadz.net


Thank you!