Blog này sẽ thảo luận về phương pháp áp dụng hiệu ứng đổ bóng cho các phần tử HTML.
Làm cách nào để tạo hiệu ứng đổ bóng trên các phần tử HTML bằng CSS?
Các ' bóng hộp ” Thuộc tính thêm bóng xung quanh một phần tử trong đó hai hoặc nhiều giá trị hiệu ứng được thêm vào có thể được phân tách bằng dấu phẩy.
Cú pháp của thuộc tính box-shadow được mô tả bên dưới.
cú pháp
bóng hộp : không ai |h-offset v-offset blur trải màu | chèn vào | ban đầu | bạn thừa hưởng ;
Mô tả của cú pháp nêu trên được liệt kê dưới đây:
- “ không ai ”: Là giá trị mặc định của thuộc tính box-shadow.
- “ h-offset ”: Giá trị này đại diện cho khoảng cách theo chiều ngang.
- “ v-offset ”: Giá trị này xác định khoảng cách dọc.
- “ mơ hồ ”: Giá trị thứ ba là độ mờ. Tối đa hóa giá trị của nó sẽ tối đa hóa hiệu ứng mờ.
- “ Lan tràn ”: Giá trị thứ tư đại diện cho sự lan rộng của bóng tối. Nó có thể chứa các giá trị dương hoặc âm, trong đó giá trị dương làm tăng mức chênh lệch và giá trị âm làm giảm mức chênh lệch.
- “ màu ”: Giá trị này là tùy chọn, đại diện cho màu hiện tại.
- “ ban đầu ”: Giá trị này đặt thuộc tính của giá trị ban đầu của nó.
- “ bạn thừa hưởng ”: Giá trị này kế thừa thuộc tính của phần tử cha của nó.
- “ chèn vào ”: Giá trị chèn vào được sử dụng để tạo bóng bên trong hộp.
Hãy xem hiệu ứng đổ bóng trông như thế nào qua một ví dụ thực tế.
Ví dụ
Trong tệp HTML, trước tiên, hãy thêm “ để cung cấp nội dung cho trang web. Bây giờ, hãy áp dụng các thuộc tính CSS cho các thành phần HTML đã thêm. Phần tử div được áp dụng với thuộc tính “ bóng hộp ” với giá trị“ 3px 8px ”, đại diện cho độ lệch ngang và độ lệch dọc. đầu ra Trong phần tiếp theo, các thành phần HTML sẽ được tạo kiểu với các thuộc tính khác nhau. Sau đây là các thuộc tính CSS bổ sung được áp dụng cho phần tử div: Đoạn mã trên sẽ hiển thị phần tử div như bên dưới: Bây giờ, trong phần tiếp theo, hãy tạo hai hộp đại diện cho hai phần tử div. Chúng tôi sẽ cung cấp cho mỗi cái với nhiều giá trị bóng hộp khác nhau và quan sát kết quả. Đây: Có thể thấy rằng chúng ta đã tạo kiểu cho div box2 với các thuộc tính giống nhau: Các ' bóng hộp ” có thể được sử dụng để thêm nhiều hiệu ứng đổ bóng vào phần tử HTML. Điều này có thể được thực hiện bằng cách sử dụng dấu phẩy giữa mỗi bóng như trong ví dụ dưới đây: Như bạn có thể thấy, nhiều bóng đã được áp dụng thành công: Đó là tất cả về cách sử dụng bóng viền CSS. Các ' bóng hộp ” Thuộc tính trong CSS được sử dụng để áp dụng hiệu ứng đổ bóng cho các phần tử HTML. Thuộc tính này chủ yếu bao gồm hai giá trị dành cho độ lệch ngang và độ lệch dọc, nhưng có thể có nhiều giá trị chẳng hạn như hiệu ứng làm mờ, hiệu ứng bán kính trải rộng, màu sắc, v.v. Ngoài ra, bạn cũng có thể thêm nhiều bóng cho các thành phần bằng cách sử dụng dấu phẩy giữa mỗi thuộc tính bóng hộp. Bài viết này đã giải thích thuộc tính box-shadow trong CSS bằng các ví dụ thực tế. và
HTML
< div >
< h1 > Bóng hộp < / h1 >
< P > bóng hộp: 3px 8px < / P >
< / div >
CSS
div {
bóng hộp : 3px 8px ;
}
CSS
div {
ranh giới : 5px chất rắn rgb ( 255 , 111 , 1 ) ;
bóng hộp : 3px 8px 9px 4px #f4af1b ;
}
HTML
hộp kiểu1 div
#hộp1 {
chiều rộng : 40% ;
Chiều cao : 140px ;
ranh giới : 5px chất rắn #ff9c83 ;
bóng hộp : 8px 10px 15px 20px #807f7f ;
}
hộp kiểu2 div
#hộp2 {
chiều rộng : 40% ;
Chiều cao : 140px ;
ranh giới : 5px chất rắn rgb ( 255 , 111 , 1 ) ;
bóng hộp : chèn vào 4px 8px #f4af1b ;
lề trái : 350px ;
}
Mẹo thưởng: Thêm nhiều bóng trên phần tử HTML
Phần kết luận