Introduction to text shadows

Các thành phần của text shadow

Mỗi shadow bao gồm một horizontal offset, một vertical offset, và một blur radius tùy chọn, theo thứ tự đó. Bạn cũng có thể định nghĩa màu của shadow.

Horizontal offset

Giá trị <length> đầu tiên trong giá trị của text-shadow đại diện cho horizontal offset của shadow so với văn bản gốc. Các giá trị dương di chuyển shadow sang phải, trong khi các giá trị âm di chuyển nó sang trái. Giá trị 0 là một giá trị hợp lệ phổ biến.

Trong ví dụ này, các khai báo text-shadow khác nhau chỉ ở horizontal offset của chúng. Giá trị <length> đầu tiên di chuyển shadow sang trái (-30px) hoặc sang phải (30px).

.negative {
  text-shadow: -30px 0 1px red;
}

.positive {
  text-shadow: 30px 0 1px red;
}

.zero {
  text-shadow: 0 0 1px red;
}

<p class="negative">Negative</p>
<p class="positive">Positive</p>
<p class="zero">Zero</p>

p {
  border: 1px solid;
  padding: 20px;
  font-family: sans-serif;
  font-size: 1.25rem;
}

Bạn có thể nhận thấy rằng thuộc tính text-shadow không có hiệu lực trên CSS box model, tương tự như thuộc tính outline. Giống như box-shadow, text shadow không ảnh hưởng đến bố cục, không kích hoạt cuộn, và không ảnh hưởng đến kích thước của vùng overflow có thể cuộn. Mặc dù text shadow có thể làm cho văn bản của một phần tử trông lớn hơn, chúng không có tác động thực tế lên chiều rộng (hoặc chiều cao) của nội dung.

Vertical offset

Giá trị <length> thứ hai trong giá trị của text-shadow đại diện cho vertical offset của shadow so với văn bản gốc. Giá trị bắt buộc này hoạt động tương tự như horizontal offset, ngoại trừ nó di chuyển shadow lên hoặc xuống thay vì sang trái hoặc phải.

Trong ví dụ này, các khai báo text-shadow khác nhau chỉ ở vertical offset của chúng. Giá trị <length> thứ hai di chuyển shadow lên (-30px) hoặc xuống (30px).

.negative {
  text-shadow: 0 -30px 1px red;
}

.positive {
  text-shadow: 0 30px 1px red;
}

.zero {
  text-shadow: 0 0 1px red;
}

Blur radius

Blur radius được định nghĩa bởi giá trị <length> thứ ba và là tùy chọn. Nếu bị bỏ qua, blur radius là 0, tạo ra một bản sao của văn bản được định vị bởi hai giá trị length đầu tiên. Giá trị phải là 0 hoặc lớn hơn; giá trị càng lớn, hiệu ứng shadow sẽ được phân tán rộng hơn.

Trong ví dụ này, các khai báo text-shadow khác nhau chỉ ở blur radius của chúng. Giá trị <length> thứ ba này hoặc không hợp lệ (-5px), làm mờ shadow (5px), hoặc tạo ra một bản sao của văn bản (0).

.negative {
  /* invalid */
  text-shadow: 30px 30px -5px red;
}

.positive {
  text-shadow: 30px 30px 5px red;
}

.zero {
  text-shadow: 30px 30px 0 red;
}

Màu shadow

Mặc dù bạn có thể áp dụng nhiều shadow cho văn bản, mỗi shadow bao gồm một màu cơ bản duy nhất. Màu đó có thể là bất kỳ giá trị CSS color hợp lệ nào, mặc định là currentcolor nếu bị bỏ qua.

Ba shadow sau đây tương đương nhau về màu shadow:

.shadow-color {
  text-shadow:
    5px 5px mediumblue,
    10px 10px magenta,
    15px 15px rebeccapurple;
}

.shadow-color-hex {
  text-shadow:
    5px 5px #0000cd,
    10px 10px #ff00ff,
    15px 15px #663399;
}

.shadow-color-rgb {
  text-shadow:
    5px 5px rgb(0 0 205),
    10px 10px rgb(255 0 255),
    15px 15px rgb(102 51 153);
}

Nhiều shadow

Bạn có thể áp dụng nhiều shadow cho cùng một văn bản bằng cách bao gồm nhiều giá trị shadow được phân tách bằng dấu phẩy.

Các hiệu ứng shadow được áp dụng theo thứ tự từ trước ra sau: shadow đầu tiên ở trên cùng.

Trong ví dụ của chúng ta về text-shadow: 5px 5px mediumblue, 10px 10px magenta, 15px 15px rebeccapurple;, nó định nghĩa ba shadow, với shadow màu xanh ở trên màu hồng, màu hồng ở trên màu tím:

p {
  text-shadow:
    5px 5px mediumblue,
    10px 10px magenta,
    15px 15px rebeccapurple;
}

<p>I have three shadows</p>

Nhiều shadow với văn bản trong suốt

Các shadow được vẽ phía trên bất kỳ màu nền hoặc hình ảnh nào và bên dưới bất kỳ border nào. Mặc dù các shadow chồng lên nhau, chúng không chồng lên văn bản. Không có tương đương với từ khóa inset của thuộc tính box-shadow trong thế giới text shadow. Không giống như box shadow, text shadow không bị cắt theo hình dạng shadow và có thể hiển thị qua nếu văn bản có một phần trong suốt.

Các ví dụ sau áp dụng cùng các shadow cho văn bản nhưng với các giá trị thuộc tính color khác nhau. Các ví dụ bán trong suốt khó đọc nhưng được bao gồm để minh họa cách shadow hiển thị:

p {
  text-shadow:
    5px 5px 0 mediumblue,
    10px 10px 5px magenta,
    15px 15px 10px rebeccapurple;
}

.opaque {
  color: black;
}

.semitransparent {
  color: rgb(0 0 0 / 0.5);
}

.transparent {
  color: transparent;
}

.white {
  color: white;
}

.semi-white {
  color: rgb(255 255 255 / 0.75);
}

<p class="opaque">The text is opaque black</p>
<p class="semitransparent">The text is semiopaque black</p>
<p class="transparent">The text is transparent black</p>
<p class="white">The text is opaque white</p>
<p class="semi-white">The text is semiopaque white</p>

p {
  border: 1px solid black;
  padding: 20px;
  font-family: sans-serif;
  font-size: 1.75rem;
  font-weight: bold;
}

Trong ví dụ "transparent", văn bản trong suốt nhưng hoàn toàn có thể đọc được vì shadow trên cùng không bị mờ. Lưu ý cách shadow xuất hiện phía sau văn bản và có thể nhìn thấy khi văn bản ít hơn hoàn toàn mờ. Điều này đặc biệt dễ thấy trong ví dụ "semi-opaque white". Hành vi này khác với các non-inset box shadow, nơi shadow bị cắt ở cạnh ngoài của border.