Bo góc với lệnh CSS

Thứ Sáu, 24 tháng 4, 2009

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:

.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;}


<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:

.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;}


<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:

.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;}


<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:

.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;}


<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

Xem nhiều trong tuần

Giới thiệu về tôi

Phim Vui lắm

Lưu trữ Blog

Bo góc với lệnh CSS

Comments[ 0 ]

Đăng nhận xét