Đường viền (border)

Một phần của tài liệu bài báo cáo về tìm hiểu CSS3 (Trang 41 - 46)

Chức năng border, là một cách tuyệt vời để tại cấu trúc cho nội dung, tạo hiệu ứng xung quanh hình ảnh hoặc tạo ra những layout chuyên nghiệp. Tất cả những ví dụ dưới đây là những trang mẫu sử

dụng CSS3. Tuy nhiên, nó chỉ thể hiện hết tính năng khi được xem với các trình duyệt mới nhất.

View the live examples page

2.1 Đường viền có góc tròn (Rounded Borders)

Khó vận dụng CSS để làm được rounded border – Đã có nhiều cách nhưng nó chưa phải là tốt nhất. Rất dễ khi làm việc này với CSS3. Nó có thể được áp dụng cho từng góc, và dễ dàng thay đổi thông số về chiều rộng và màu sắc.

Cú pháp: border-image: source slice width outset repeat;

. Ví dụ CSS: 1 2 3 4 5 6 7 8 .border_rounded { background-color: #ddccb5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #897048; padding: 10px; width: 310px; } 2.2 Gradients

Gradient borders có thể tạo ra những hiệu ứng tuyệt vời nếu được dùng cẩn thận. Đoạn mã dưới đây giúp bạn chọn màu sắc cho gradient border. Ví du CSS:

1 2 3 4 5 6 7 8 9 .border_gradient { border: 8px solid #000;

-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;

-moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;

-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;

-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;

padding: 5px 5px 5px 15px; width: 300px;

}

2.3 Box Shadows

Thêm bóng cho những thành phần là rất khó để thể hiện – nó là cách để tạo sự khác biệt hoặc chú { cho những vùng chính trên website: http://vnwordpress.com/web-

photoshop/chuyen-muc/tac-pham/, tuy nhiên giống như

những hiệu ứng khác, nó phải được sử dụng với sự cân nhắc kỹ càng. Ví du CSS: 1 2 3 4 5 .border_shadow { -webkit-box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px; width: 300px; }

2.4 Border Images

Border images là một trong những hiệu ứng hay nhất. CSS có thể lặp hoặc kéo dãn hình ảnh bạn chọn làm đường viền.

Cú pháp: border-image: source slice width outset repeat; Có những loại như sau:

border-image-source: đường dẫn đến hình ảnh được sử dụng như một đường viền

Cú pháp: border-image-source: none|image; Trong đó:

 None: Không có hình ảnh được sử dụng

 Image: đường dẫn đến hình ảnh được sử dụng như một đường viền

border-image-slice: là độ lệch vào bên trong của hình

ảnh đường viền. các thuộc tính này thêm vào thuộc tính của border image để đầy đủ hơn.

Cú pháp: border-image-slice: number|%|fill; Trong đó:

 Number: con số đại diện cho điểm ảnh trong hình

ảnh (nếu hình ảnh là một hình ảnh raster) hoặcvector tọa độ (nếu hình ảnh là một hình ảnh vector)

 %: Tỷ lệ phần trăm so với kích thước của hình ảnh: độ rộng của hình ảnh cho độ lệch theo chiều ngang, chiều cao để bù đắp theo chiều dọc

 Fill: Nguyên nhân phần giữa của hình ảnh biên giới được lưu giữ

border-image-width: độ rộng của của đường viền hình ảnh Cú pháp: border-image-width: number|%|auto;

Trong đó:

 Number: Đại diện bội số của chiều rộng tương ứng với đường viền

 %: Đề cập đến kích thước của hình ảnh khu vực đường viền : chiều rộng của khu vực nàycho độ lệch theo chiều ngang, chiều cao để độ lệch theo chiều dọc

 Auto: Nếu quy định, chiều rộng bề rộng hoặc chiều cao của slice hình ảnh tương ứng bên trong

Ví dụ: Xác định độ rộng của đường biên hình ảnh: div

{

border-image-source: url(border.png); border-image-width: 30 30;

}

border-image-outset: số lượng trong đó diện tích hình ảnh đường viền mở rộng vượt ra ngoài hộp đường viền Cú pháp: border-image-outset: length|number;

Trong đó:

 Number: Đại diện bội số của chiều rộng tương ứng với đường viền Ví dụ: div { border-image-source: url(border.png); border-image-outset: 30 30; }

border-image-repeat: Cho dù đường viền hình ảnh được lặp đi lặp lại, được làm tròn hoặc kéo dài.

Cú pháp: border-image-repeat: stretch|repeat|round; Trong đó:

 Stretch: Những hình ảnh được kéo dài để điền vào các khu vực  Repeat: Hình ảnh được lát gạch (lặp đi lặp lại) để điền vào

các khu vực

 Round: Hình ảnh được lát gạch (lặp đi lặp lại) để điền vào các khu vực. Nếu nó không điền vào các khu vực với một số lượng gạch toàn bộ, hình ảnh được thay đổi tỷ lệ để nó phù hợp với khu vực đó.

Ví dụ đơn giản CSS3: 1

2

.border_image {

3 }

Một phần của tài liệu bài báo cáo về tìm hiểu CSS3 (Trang 41 - 46)

Tải bản đầy đủ (PDF)

(59 trang)