Loading post navigation ...
 
 

Pro page

5
Nhận xét

Bo góc với lệnh CSS

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

CSS Round Corners
[FD's BlOg] - Bài viết trước mình có giới thiệu cách bo góc với CSS3, và bạn Ngankvn có thắc mắc là muốn bo góc với phương pháp cũ, và hôm nay mình cũng xin giới thiệu cho mọi người cách bo góc với phương pháp cũ, đó là dùng trong CSS.

Thủ thuật bo góc này dựa trên việc xếp chồng các đường viền lại với nhau kết hợp với giảm lề đều ở mỗi đường. Mình sẽ vẽ 1 hình ví dụ cho các bạn thấy.

- Trong hình trên, đường màu xanh biểu thị cho border trong cùng, và căn lề nhỏ nhất, tiếp theo là đường màu xanh dương - có căn lề lớn hơn, và cuối cùng là đường màu đỏ có căn lề lớn nhất cũng chính là border ngòai cùng. Việc bo góc tròn hay không là do ta tính tóan căn lề cho từng border. Và mặc định border ngòai sẽ bo lấy border trong, nên nó sẽ xếp lớp 1 cách liên tục.
- Đường màu xám sẽ là kết quả khi ta bo.
- Cơ bản là như thế.

Bây giờ tiến hành vào từng ví dụ.

Ví dụ 1: Các border có cùng màu và cùng với màu nền của khung chứa nội dung.
►Code:

<!--CSS-->
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}

<!--HTML-->
<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="contentf">
<div>FD's BlOg - Ví dụ 1 : các border có cùng màu, và cùng màu với nền</div>
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>


►Đọc Code:
- Ta thấy class b1f chính là lớp border ngòai cùng và được căn lề là 5px -> lớn nhất.
- Các lớp tiếp theo b2f, b3f, b4f căn lề giảm dần 3px, 2px, 1px,
- Và các border này và nền của nội dung đều có màu là #ddd.

► Hình minh họa:(nhấp vào ảnh để xem kích thước thật)


Để thấy rõ như hình vẽ ví dụ, ta sẽ sang ví dụ 2:

Ví dụ 2: Các đường boder có các màu khác nhau.
►Code:

<!--CSS-->
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#F00; margin:0 5px;}
.b2f {height:1px; background:#0F0; margin:0 3px;}
.b3f {height:1px; background:#00F; margin:0 2px;}
.b4f {height:2px; background:#F0F; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}

<!--HTML-->
<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="contentf">
<div>FD's BlOg - Ví dụ 2 : các border có màu khác nhau</div>
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>


►Đọc Code:
- Ta thấy các border b1f, b2f, b3f, b4f có các màu lần lượt là #F00, #0F0, #00F, #F0F.

► Hình minh họa:(nhấp vào ảnh để xem kích thước thật)


Ví dụ 3: Một ví dụ về bo góc có đường viền.
►Code:

<!--CSS-->
.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background:#888; margin:0 5px;}
.b2 {height:1px; background:#ddd; border-right:2px solid #888; border-left:2px solid #888; margin:0 3px;}
.b3 {height:1px; background:#ddd; border-right:1px solid #888; border-left:1px solid #888; margin:0 2px;}
.b4 {height:2px; background:#ddd; border-right:1px solid #888; border-left:1px solid #888; margin:0 1px;}
.contentb {background: #ddd; border-right:1px solid #888; border-left:1px solid #888;}
.contentb div {margin-left: 5px;}

<!--HTML-->
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="contentb">
<div>FD's BlOg - Ví dụ 3: bo góc có đừong viền</div>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>


►Đọc Code:
- Ta thấy rằng các lớp b2, b3, b4 có thêm các đường border ở 2 bên trái và phải, với màu giống như màu của lớp ngòai cùng b1.

► Hình minh họa:(nhấp vào ảnh để xem kích thước thật)


Nâng cao hơn, ta sẽ tạo ra một lớp có màu riêng biệt so với các phần khác, ví dụ như tiêu đề của bảng. Các bạn xem ví dụ 4 bên dưới.

Ví dụ 4: Tạo 1 lớp có màu khắc biệt
►Code:

<!--CSS-->
.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}
.b1h {height:1px; background:#aaa; margin:0 5px;}
.b2h, .b2bh {height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.b3h, .b3bh {height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.b4h, .b4bh {height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.b2bh, .b3bh, .b4bh {background: #ddd;}
.headh {background: #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contenth {background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.contenth div {margin-left: 12px; padding-top: 5px;}

<!--HTML-->
<b class="b1h"></b><b class="b2h"></b><b class="b3h"></b><b class="b4h"></b>
<div class="headh">
<h3>Tiêu đề của bảng</h3>
</div>
<div class="contenth">
<div>Nội dung của bảng</div>
</div>
<b class="b4bh"></b><b class="b3bh"></b><b class="b2bh"></b><b class="b1h"></b>


►Xem hình minh họa:


Như vậy coi như mình đã giới thiệu xong cách bo góc bằng phương pháp cũ, bo góc với CSS. Các bạn có thể lấy 4 mẫu mình ví dụ rồi chỉnh sửa màu theo ý mình là dùng được.

Theo Blog Yosle


Enter your mail address:

5

Ngankvn ®

Wao cái này phải ngâm cứu từ từ , có vẻ đây là hàng độc quyền :D , Thank Fandung Blog nhé :) . Có lẽ áp dụng cho comments là Đẹp nhất !!!

fandung-tester

Cảm ơn về lời khen, post xong bài này giờ mình muốn mệt luôn.

Không ngờ bạn cũng thường xuyên ghé thăm blog mình quá, cảm ơn nha!

Giới thiệu mọi người ghé thăm blog mình với nhé :).

Ngankvn ®

À !! Lâu lắm mới có một blog viết thủ thuật cho Blogger mà , Phải lục lọi cho kỹ :))

Ngankvn ®

À thế mình không muốn Bo tròn 4 góc như nhau mà muốn bo tròn một góc chỉ định thì có làm đc ko ?? Ví dụ chỉ muốn hai góc dưới đc bo tròn , còn hai góc trên vẫn Bình thường ????

fandung

À, mình nghĩ như thế này, với cái thủ thuật ở bài viết trên, bo 4 góc ta sẽ padding (căn lề) 2 cạnh đó là left và right, còn khi bạn muốn bo riêng 2 góc ở dưới thì ta chỉ padding cạnh duy nhất là cạnh bottom (dưới). Còn muốn bo góc trên thì bạn padding cạnh top.

Mình nghĩ là như thế, nhưng chưa thử, nếu Ngân chưa rõ khi nào mình test hoàn chỉnh mình sẽ post 1 bài riêng về phần này cho bạn. :)



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home