HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Hướng dẫn CSS

TRANG CHỦ CSS Giới thiệu CSS Cú pháp CSS Bộ chọn CSS CSS Cách thực hiện Nhận xét CSS Màu CSS
Colors RGB HEX HSL
Nền CSS
Background Color Background Image Background Repeat Background Attachment Background Shorthand
Đường viền CSS
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
Lề CSS
Margins Margin Collapse
CSS Padding Chiều cao / Chiều rộng CSS Mô hình hộp CSS Đề cương CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Văn bản CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Phông chữ CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Biểu tượng CSS Liên kết CSS Danh sách CSS Bảng CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Hiển thị CSS Chiều rộng tối đa CSS Vị trí CSS CSS Z-index CSS Overflow CSS Float
Float Clear Float Examples
Khối nội tuyến CSS Căn chỉnh CSS Bộ kết hợp CSS Lớp giả CSS Phần tử giả CSS Độ mờ của CSS Thanh điều hướng CSS
Navbar Vertical Navbar Horizontal Navbar
Trình đơn thả xuống CSS Thư viện hình ảnh CSS Hình ảnh CSS Sprites Bộ chọn CSS Attr Biểu mẫu CSS Bộ đếm CSS Bố cục trang web CSS Đơn vị CSS Đặc tính CSS CSS! Quan trọng Các hàm toán học CSS

CSS nâng cao

Góc làm tròn CSS Hình ảnh đường viền CSS Nền CSS Màu CSS Từ khóa màu CSS CSS Gradients
Linear Gradients Radial Gradients Conic Gradients
Bóng CSS
Hiệu ứng đổ bóng Hộp bóng
Hiệu ứng văn bản CSS Phông chữ Web CSS Chuyển đổi CSS 2D Chuyển đổi CSS 3D Chuyển đổi CSS Hoạt ảnh CSS Chú giải công cụ CSS Hình ảnh phong cách CSS Phản chiếu hình ảnh CSS CSS object-fit Vị trí đối tượng CSS Mặt nạ CSS Các nút CSS Phân trang CSS CSS Nhiều cột Giao diện người dùng CSS Biến CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Kích thước hộp CSS Truy vấn phương tiện CSS Ví dụ về CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS đáp ứng

Giới thiệu về RWD RWD Viewport Chế độ xem lưới RWD Truy vấn phương tiện RWD Hình ảnh RWD RWD Video Khung RWD Mẫu RWD

Lưới CSS

Grid Intro Vùng chứa lưới Mục lưới

CSS SASS

Hướng dẫn SASS

Ví dụ về CSS

Mẫu CSS Ví dụ về CSS câu đố css Bài tập CSS Chứng chỉ CSS

Tham chiếu CSS

Tham chiếu CSS Bộ chọn CSS Chức năng CSS Tham chiếu CSS Aural Phông chữ An toàn trên Web CSS Hoạt hình CSS Đơn vị CSS Công cụ chuyển đổi CSS PX-EM Màu CSS Giá trị màu CSS Giá trị mặc định của CSS Hỗ trợ trình duyệt CSS

CSS Box Shadow

❮ Trước Kế tiếp ❯

Thuộc tính box-shadow trong CSS

Thuộc tính CSS box-shadowđược sử dụng để áp dụng một hoặc nhiều bóng cho một phần tử.

Chỉ định Bóng ngang và Bóng dọc

Trong cách sử dụng đơn giản nhất, bạn chỉ xác định bóng ngang và bóng dọc. Màu mặc định của bóng là màu văn bản hiện tại.

Phần tử <div> có bóng hộp

Thí dụ

Chỉ định bóng ngang và bóng dọc:

div {
  box-shadow: 10px 10px;
}

Chỉ định màu cho bóng đổ

Tham colorsố xác định màu của bóng đổ.

Phần tử <div> có bóng hộp màu xám

Thí dụ

Chỉ định màu cho bóng:

div {
  box-shadow: 10px 10px grey;
}

Thêm hiệu ứng làm mờ cho bóng đổ

Tham blursố xác định bán kính mờ. Con số này càng cao thì bóng mờ càng nhiều.

Phần tử <div> có bóng hộp màu xám, mờ 5px

Thí dụ

Thêm hiệu ứng mờ vào bóng:

div {
  box-shadow: 10px 10px 5px grey;
}

Đặt Bán kính Trải rộng của Bóng đổ

Tham spreadsố xác định bán kính lây lan. Giá trị dương làm tăng kích thước của bóng, giá trị âm làm giảm kích thước của bóng.

Phần tử <div> có bóng hộp mờ, màu xám, với bán kính trải rộng là 12px

Thí dụ

Đặt bán kính lan rộng của bóng:

div {
  box-shadow: 10px 10px 5px 12px grey;
}

Đặt thông số cài đặt

Tham insetsố thay đổi bóng từ bóng bên ngoài (đầu tiên) thành bóng bên trong.

Phần tử <div> có bóng hộp mờ, xám, lồng vào nhau

Thí dụ

Thêm tham số cài đặt:

div {
  box-shadow: 10px 10px 5px grey inset;
}

Thêm nhiều bóng

Một phần tử cũng có thể có nhiều bóng:

Thí dụ

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

thẻ

Bạn cũng có thể sử dụng thuộc box-shadowtính này để tạo thẻ giống như giấy:

1

Ngày 1 tháng 1 năm 2021

Na Uy

Hardanger, Na Uy

Thí dụ

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Kiểm tra bản thân với các bài tập

Bài tập:

Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.

<style>
h1 {
  : 2px 2px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text

❮ Previous Next ❯