Hướng dẫn box shadow text css - hộp văn bản bóng mờ css

  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học CSS3
  • text-shadow

text-shadow là gì?

Tương tự như





Text shadow
8,




Text shadow
9 cũng là thuộc tính mới trong CSS3, được sử dụng để tạo bóng đổ (shadow) cho text.

Cấu trúc

tag {
    text-shadow: h-offset v-offset blur color;
}





Text shadow
9 có tất cả 4 giá trị chính, lần lượt điều khiển shadow dịch chuyển theo chiều ngang (
div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
}
1), theo chiều dọc (
div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
}
2), tạo độ mờ (
div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
}
3), và màu cho shadow.

Giá trịĐơn vịVDMô tả
h-offset px em
em
5px Điều chỉnh khoảng cách shadow theo chiều ngang
v-offset px em
em
5px Điều chỉnh khoảng cách shadow theo chiều ngang
v-offset px em
em
5px Điều chỉnh khoảng cách shadow theo chiều ngang
v-offset Điều chỉnh khoảng cách shadow theo chiều dọc
Tên màu
Giá trị rgba
blur
red
rgba(183, 183, 183, 0.5);
Điều chỉnh độ mờ của shadow

color

Mã màu Tên màu Giá trị rgba





Text shadow

#ff0000; red rgba(183, 183, 183, 0.5);

div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
}

Các giá trị màu có thể có của shadow

Cách sử dụng

HTML viết:

div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0px 5px 5px #999999;
}

Các giá trị màu có thể có của shadow

Cách sử dụng

HTML viết:

CSS viết - khi chưa sử dụng





Text shadow
9:

div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0px 5px 5px #999999;
}

Hiển thị trình duyệt:

div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0px 5px 5px #999999;
}

Bây giờ ta sẽ sử dụng





Text shadow
9 để chỉnh shadow cho text như sau:

div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0px 5px 5px #999999;
}

CSS viết:

  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học CSS3
  • box-shadow

box-shadow là gì?





Text shadow
8 là thuộc tính được tạo ra nhằm xử lý bóng đổ (shadow) cho thành phần, nếu như trước đây để tạo được shadow, ta cần dùng
div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0px 5px 5px #999999;
}
0, và xử lý transparence phức tạp, thì giờ đây việc này sẽ vô cùng đơn giản.

Cấu trúc

tag {
    box-shadow: h-offset v-offset blur spread color optional;
}

box-shadow có tất cả 5 giá trị chính, lần lượt điều khiển shadow dịch chuyển theo chiều ngang (

div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
}
1), theo chiều dọc (
div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
}
2), tạo độ mờ (
div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
}
3), tạo shadow phân tán (
div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0px 5px 5px #999999;
}
4) và màu cho shadow, và 1 giá trị tùy chọn, được dùng thay đổi tính chất shadow theo vị trí bên ngoài hay bên trong thành phần (
div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0px 5px 5px #999999;
}
5).

Giá trịĐơn vịVDMô tả
h-offset px em
em
5px Điều chỉnh khoảng cách shadow theo chiều ngang
v-offset px em
em
5px Điều chỉnh khoảng cách shadow theo chiều ngang
v-offset px em
em
5px Điều chỉnh khoảng cách shadow theo chiều ngang
v-offset px em
em
5px Điều chỉnh khoảng cách shadow theo chiều ngang
v-offset Điều chỉnh khoảng cách shadow theo chiều dọc
Tên màu
Giá trị rgba
blur
red
rgba(183, 183, 183, 0.5);
Điều chỉnh độ mờ của shadow
spread Điều chỉnh độ phân tán của shadow Điều chỉnh độ phân tán của shadow color

Mã màu Tên màu Giá trị rgba

#ff0000; red rgba(183, 183, 183, 0.5);





Box - shadow

Các giá trị màu có thể có của shadow

div {
    border: 3px solid #ffcccc;
    height: 100px;
    line-height: 100px;
    margin: 30px;
    text-align: center;
    width: 200px;
}

optional

inset

Shadow bên trong thành phần





Text shadow
0

optional

inset

Hiển thị trình duyệt: điều chỉnh shadow theo chiều ngang:





Text shadow
1

Hiển thị trình duyệt: điều chỉnh shadow theo chiều dọc





Text shadow
2





Text shadow
8 với
div {
    color: #4576FF;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0px 5px 5px #999999;
}
5





Text shadow
3

Ví dụ thêm - Một số
Text shadow
8 thường dùng

Shadow nhạt





Text shadow
4

Shadow đậm





Text shadow
5

Shadow bên dưới gần





Text shadow
6

Shadow bên dưới xa





Text shadow
7

Tới đây chắc các bạn đã biết cách dùng





Text shadow
8 như thế nào rồi he, các bạn cũng có thể xem nhiều ví dụ hơn tại phần tham khảo box-shadow hoặc xem công cụ tạo box-shadow nhé.