Hiệu ứng bóng CSS

Cà phê
Bóng

Tạo hiệu ứng bóng bằng CSS!

Trên đây, trỏ chuột vào!

Hiệu ứng bóng CSS

Bằng cách sử dụng CSS, bạn có thể thêm bóng vào văn bản và các phần tử.

Trong hướng dẫn của chúng tôi, bạn sẽ học các thuộc tính sau:

  • text-shadow
  • box-shadow

Bóng văn bản CSS

CSS text-shadow Thuộc tính thêm bóng vào văn bản.

Cách sử dụng đơn giản nhất là chỉ cần chỉ định bóng ngang (2px) và bóng dọc (2px):

文字阴影效果！

实例

h1 {
  text-shadow: 2px 2px;
{}

亲自试一试

Tiếp theo, thêm màu vào bóng:

文字阴影效果！

实例

h1 {
  text-shadow: 2px 2px red;
{}

亲自试一试

Sau đó, thêm hiệu ứng mờ vào bóng:

文字阴影效果！

实例

h1 {
  text-shadow: 2px 2px 5px red;
{}

亲自试一试

Dưới đây là ví dụ minh họa về văn bản trắng có bóng đen:

文字阴影效果！

实例

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
{}

亲自试一试

Dưới đây là ví dụ minh họa về ánh sáng mờ neon đỏ:

文字阴影效果！

实例

h1 {
  text-shadow: 0 0 3px #FF0000;
{}

亲自试一试

Nhiều bóng

Nếu bạn muốn thêm nhiều bóng vào văn bản, bạn có thể thêm danh sách bóng được phân隔 bằng dấu phẩy.

Dưới đây là ví dụ minh họa về ánh sáng mờ neon đỏ và xanh lam:

文字阴影效果！

实例

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
{}

亲自试一试

dưới đây là ví dụ về văn bản trắng có bóng đen, xanh và xanh đậm:

文字阴影效果！

实例

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
{}

亲自试一试

您还可以使用 text-shadow 属性在文本周围创建纯边框（无阴影）：

包围文本的边框！

实例

h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
{}

亲自试一试