Tổng hợp text-shadow trong css mới nhất 2020

Text-shadow trong css là một trong những keyword được search nhiều nhất trên Google về chủ đề text-shadow trong css. Trong bài viết này, hoclamweb.vn sẽ viết bài viết Tổng hợp text-shadow trong css mới nhất 2020.

Text Shadow Trong Css

Tóm Tắt

tính chất text-shadow: xác định bóng đổ cho thành phần.

HTML viết:

Text shadow

CSS viết:

p 
    font-size: 20px;
    font-weight: bold;

Hiển thị trình duyệt khi chưa có text-shadow:

Text shadow

Thêm

tính chất

text-shadow, CSS viết:

p 
    font-size: 20px;
    font-weight: bold;text-shadow: 2px 2px 2px #cc0000;

Hiển thị trình duyệt khi có text-shadow:

Text shadow

thuộc tính

text-shadow với

trị giá

chiều ngang

thuộc tính text-shadow với trị giá chiều ngang: dựng lại vị trí của bóng theo chiều ngang, có thể dùng trị giá âm.

Thêm

thuộc tính

text-shadow với

giá trị

chiều ngang, CSS viết:

p 
    font-size: 20px;
    font-weight: bold;
    text-shadow: 10px 2px 2px #cc0000;

Hiển thị trình duyệt khi có text-shadow:

Text shadow

tính chất

text-shadow với

trị giá

chiều dọc

thuộc tính text-shadow với trị giá chiều dọc: định hình vị trí của bóng theo chiều dọc, có thể sử dụng trị giá âm.

Thêm

thuộc tính

text-shadow với

giá trị

chiều dọc, CSS viết:

p 
    font-size: 20px;
    font-weight: bold;
    text-shadow: 2px 10px 2px #cc0000;

Hiển thị trình duyệt khi có text-shadow:

Text shadow

tính chất

text-shadow với

giá trị

độ nhòe của bóng

tính chất text-shadow với giá trị độ nhòe của bóng: dựng lại khoảng cách độ nhòe của bóng.

Thêm

tính chất

text-shadow với

trị giá

độ nhòe của bóng, CSS viết:

p 
    font-size: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 10px #cc0000;

Hiển thị trình duyệt khi có text-shadow:

Text shadow

tính chất

text-shadow với

giá trị

mã màu

tính chất text-shadow với trị giá mã màu: dựng lại màu sắc của bóng.

Thêm

thuộc tính

text-shadow với

trị giá

mã màu, CSS viết:

p 
    font-size: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 2px #00ff00;

Hiển thị trình duyệt khi có text-shadow:

Text shadow

nguồn: hocwebchuan.com

Tổng hợp text-shadow trong css mới nhất 2020 – Học làm web