Các kỹ thuật biên giới CSS3 mới

Biên giới đã là một phần của CSS ngay từ đầu, nhưng CSS3 bổ sung một số tùy chọn mới thực sự thú vị. Các trình duyệt hiện đại giờ hỗ trợ biên giới được làm từ hình ảnh cũng như các góc tròn và bóng hộp. Những kỹ thuật này hứa hẹn thêm những tính năng thú vị mới cho thiết kế của bạn.

Viền hình ảnh

CSS3 cho phép bạn sử dụng một hình ảnh cho một đường viền phần tử. Cơ chế này khá mạnh mẽ vì nó phát hiện các cạnh của hình ảnh và "lát" nó để tạo các cạnh và góc của đường viền từ các cạnh và góc của hình ảnh.

Hình ảnh khung được lưu trữ dưới dạng khung. png trong cùng thư mục với tệp HTML. Nó có một trung tâm trong suốt. Áp dụng mã sau đây để thêm đường viền hình ảnh xung quanh tất cả các phần tử trên trang:

h2 {border-width: 15px; border-image: url ("frame. png") 25% lặp lại; -webkit-border-image: url ("khung. png") 25% lặp lại; -moz-border-image: url ("frame. png") 25% lặp lại;}

Đây là cách bạn thêm hình ảnh đường viền:

Có được hình ảnh của bạn.

Hình ảnh nên đã được thiết kế như một số loại biên giới. Thông thường nó sẽ là một hình dạng xung quanh các cạnh, với một trung tâm màu rắn hoặc trung tâm trong suốt.
Chỉ định chiều rộng đường viền.

Bạn sẽ cần phải trực tiếp chỉ ra chiều rộng đường viền. Biên giới của hình ảnh khung được điều chỉnh để phù hợp với kích thước bạn muốn.
Tính toán bao nhiêu bức ảnh mà bạn muốn.

Nếu bạn bỏ dấu phần trăm, giá trị tính bằng pixel. Bạn có thể thêm bốn giá trị nếu bạn muốn sử dụng các số tiền khác nhau của hình ảnh gốc cho mỗi ranh giới.
Cho biết hành vi bạn muốn.

Hình ảnh ban đầu gần như không bao giờ có cùng kích thước với phần tử bạn muốn bao quanh, vì vậy bạn có thể cung cấp một mẹo để giải thích cách trình duyệt sẽ xử lý các phần tử lớn hơn bản gốc. Các lựa chọn phổ biến nhất là lặp lại (lặp lại hình ảnh ban đầu) hoặc căng ra (để chiếm toàn bộ không gian). Với một hình ảnh đơn giản như khung. png được sử dụng trong ví dụ này, kết quả sẽ giống nhau.

Cách thêm các góc tròn

CSS cũ hơn được biết đến với hình chữ nhật rất đơn giản, do đó, các nhà thiết kế web đã cố gắng làm dịu các thiết kế của họ bằng cách thêm các góc tròn. Đây là một hiệu ứng khó khăn để đạt được. CSS3 rất đơn giản hoá việc tạo ra các góc tròn với luật bán kính biên.

Thật dễ dàng để có được các góc tròn trên các trình duyệt hỗ trợ thẻ

góc. html h1 {width: 60%; màu nền: # 000066; màu sắc: # 9999ff; đường viền: số 9999 và 3px rãnh; lề: tự động; text-align: trung tâm; bán kính biên giới:. 5em;}

Phiên bản Vòng tròn

Quy tắc này hoạt động bằng cách cắt một đường cung từ mỗi góc của phần tử.Các cung có bán kính quy định, do đó, cho các góc sắc nét, bạn sẽ muốn có một bán kính nhỏ. Bạn có thể đo bán kính trong bất kỳ phép đo phổ biến nào, nhưng các pixel (px) và chiều rộng ký tự (em) được sử dụng phổ biến nhất.

Đường viền không hiển thị trừ khi phần tử có màu nền hoặc đường viền được xác định. Lưu ý rằng có các biến thể của mỗi thẻ để hỗ trợ các góc cụ thể. Điều này có thể hữu ích nếu bạn không muốn áp dụng cùng một bán kính cho cả bốn góc của phần tử của bạn. Các trình duyệt gần đây nhất hiện hỗ trợ quy tắc biên giới chung.

Bạn có thể chọn một số trình duyệt thế hệ trước bằng cách sử dụng tiền tố cụ thể của nhà cung cấp. Nếu trình duyệt của bạn không hiểu luật bán kính biên giới, nó sẽ đơn giản tạo ra các góc bình thường.

Làm thế nào để thêm bóng hộp

Bóng hộp thường được thêm vào các phần tử để tạo ra ảo tưởng về độ sâu.

Hiệu ứng bóng hộp không phải là khó đạt được, nhưng nó thường được thực hiện như là một phần của một định nghĩa lớp để nó có thể được tái sử dụng trong suốt trang. Dưới đây là một số mã ví dụ:

boxShadow. html. bóng tối {hộp bóng tối: 10px 10px 10px # 000000; chiều cao: 200px; chiều rộng: 200px; padding: 1em; đường viền: 1px màu đen; bán kính biên giới: 5px; Màu hộp: #EEEE;)

Box Shadow Demo
Hộp này có một bóng tối

Việc thêm bóng hộp là dễ dàng hơn nhiều trong CSS3 hơn một lần. Dưới đây là các bước:

Xác định một lớp.

Thường thì bạn sẽ muốn áp dụng các cài đặt tương tự với một số phần tử trên một trang, do đó bóng hộp thường được kết hợp với các phần tử khác như màu nền và đường viền trong một lớp CSS có thể được sử dụng lại trong suốt trang.
Thêm quy tắc bóng hộp.

Các trình duyệt mới nhất hỗ trợ quy tắc hộp-bóng chuẩn, nhưng bạn cũng có thể bao gồm các tiền tố trình duyệt để chứa các trình duyệt cũ hơn.
Xác định độ lệch.

Bóng đổ thường được bù đắp từ hình chữ nhật mà nó thuộc về. Hai giá trị đầu tiên cho biết sự bù đắp theo chiều ngang và chiều dọc. Đo bằng bất kỳ phép đo CSS tiêu chuẩn nào (thường là pixel hoặc ems).
Xác định độ mờ và lan rộng khoảng cách.

Bạn có thể chỉnh sửa lại hành vi của bóng tối bằng cách chỉ định tốc độ bóng mờ và mức độ lan rộng của nó như thế nào. Đây là các tham số tùy chọn.
Cho biết màu bóng.

Bạn có thể làm cho bóng tối bất kỳ màu nào bạn muốn. Màu đen và màu xám là phổ biến, nhưng bạn có thể có được những hiệu ứng thú vị bằng cách chọn các màu khác.

Có thể có nhiều hiệu ứng bóng khác. Bạn có thể thêm nhiều bóng tối, và bạn cũng có thể sử dụng từ khóa inset để tạo một bóng đổ bên trong để làm cho nó giống như một phần của trang được cắt bỏ.