YOMEDIA
Làm bóng đổ với thuộc tính box-shadow của CSS3
Chia sẻ: Apple_1 Apple_1
| Ngày:
| Loại File: PDF
| Số trang:4
84
lượt xem
3
download
Download
Vui lòng tải xuống để xem tài liệu đầy đủ
Thuộc tính mới "box-shadow" của CSS3 là một trong những thuộc tính khá hữu dụng và được sử dụng nhiều trong quá trình viết CSS. Với thuộc tính này bạn có thể tạo cho các thành phần trong website của mình hiệu ứng bóng đổ đẹp mắt.
AMBIENT/
Chủ đề:
Nội dung Text: Làm bóng đổ với thuộc tính box-shadow của CSS3
- Làm bóng đổ với thuộc
tính box-shadow của
CSS3
- Thuộc tính mới "box-shadow" của CSS3 là một trong những thuộc tính
khá hữu dụng và được sử dụng nhiều trong quá trình viết CSS. Với
thuộc tính này bạn có thể tạo cho các thành phần trong website của
mình hiệu ứng bóng đổ đẹp mắt. Tuy nhiên thuộc tính này không được
hỗ trợ trên toàn bộ các trình duyệt hiện tại, thuộc tính này chỉ được hỗ
trợ từ Safari 3+, Firefox 3.1 (Alpha), Chrome, Opera và IE 9+.
Tùy theo ý tưởng của mình mà các bạn có thể điều chỉnh thông số sao cho
phù hợp để có được hiệu ứng đẹp mắt như mong muốn.
Khi làm việc với thuộc tính này thì các bạn cần chú ý 3 thông số chính như
sau:
Ví dụ:
1.#yourdiv {
2.box-shadow: thamso1, thamso2, thamso3, mau;
3.}
1. thamso1: Bóng đổ theo chiều ngang, nghĩa là phần bóng đổ sẽ lệch về
phía phải của đối tượng.
2. thamso2: Bóng đổ theo chiều dọc, nghĩa là phần bóng đổ sẽ lệch về
phía trên của đối tượng.
3. thamso3: Độ rộng hay còn gọi là độ dày của bóng đổ.
4. màu: Màu sắc của phần bóng đổ.
Một vài ví dụ:
1.#yourdiv {
2.background: #eee;
- 3.box-shadow: 5px 5px 5px #666;
4.-moz-box-shadow: 5px 5px 5px #666;
5.-webkit-box-shadow: 5px 5px 5px #666;
6.margin-right: 5px;
7.padding: 20px;
8.}
Với đoạn code trên thì bóng đổ sẽ lệch sang bên phải và xuống dưới vì
thamso1 và thamso2 dương.
Box shadow
1.#yourdiv {
2.background: #eee;
3.box-shadow: -5px -5px 5px #666;
4.-moz-box-shadow: -5px -5px 5px #666;
5.-webkit-box-shadow: -5px -5px 5px #666;
6.margin-right: 5px;
7.padding: 20px;
8.}
Khi thamso1 và thamso2 âm thì chúng ta sẽ được bóng đổ như dưới đây.
Box shadow
Thêm tài liệu vào bộ sưu tập có sẵn:
Báo xấu
LAVA
ERROR:connection to 10.20.1.100:9315 failed (errno=111, msg=Connection refused)
ERROR:connection to 10.20.1.100:9315 failed (errno=111, msg=Connection refused)
Đang xử lý...
Thêm vào BST
Báo xấu
