Mục lục:
Video: Bài 5: Sử dụng CSS3 trong trang Web (border-image) 2025
Bạn có thể thực hiện hàng trăm thủ thuật trên trang web của mình với CSS3. Trong số các thủ thuật chính là thay đổi kích thước các phần tử của trang web và tạo gradient cho nền của bạn.
Làm thế nào để thay đổi kích thước các yếu tố với CSS3
Bạn đã không nghi ngờ gì về việc thay đổi kích thước cửa sổ trình duyệt. Với CSS3, bây giờ bạn có thể cung cấp cho du khách khả năng thay đổi kích thước bất kỳ thẻ hoặc phần tử textarea mẫu bằng cách sử dụng thuộc tính thay đổi kích cỡ. Giá trị thay đổi kích cỡ có thể được đặt thành không, cả hai, ngang hoặc dọc, và thường được ghép nối với thuộc tính tràn được đặt thành tự động.
Trong ví dụ dưới đây, một thùng chứa rộng 300px có thể được thay đổi kích thước theo chiều ngang và chiều dọc, và bất kỳ nội dung tràn nào tự động điều chỉnh lại để phù hợp với kích thước thay đổi của thùng chứa, thêm thanh cuộn khi áp dụng:
div {width: 300px; thay đổi kích thước: cả hai; overflow: auto;}
Làm thế nào để tạo gradients với CSS3
Trước đây, khi các nhà thiết kế muốn có một nền gradient cho một phần tử, họ sẽ tạo ra đồ thị và sau đó lặp lại nó dọc theo trục X hoặc Y tới điền vào không gian. Sử dụng CSS3, bạn có thể tạo các gradient của riêng bạn tải nhanh hơn.
. gradient (/ * Safari & Chrome * / background-image: -webkit-gradient (tuyến tính, dưới cùng bên trái, bên trái, màu dừng (0, # 74B4DB), màu dừng (1, # F7ECCA)); / * Firefox * / background-image: -moz-linear-gradient (trung tâm dưới cùng, # 74B4DB 0pt, # F7ECCA 100%); Height: 200px;}Ngoài kỹ thuật được hiển thị ở đây, bạn cũng có thể tạo các hiệu ứng gradient phức tạp hơn bằng cách sử dụng trình biên tập gradient trực tuyến miễn phí trên trang web ColorZilla.
