Những chiếc hộp nhạt nhẽo trông thật nhàm chán. Làm nổi bật chúng với hiệu ứng bóng hộp CSS!

Bạn đang xem : hộp bóng trong ví dụ css

Các hộp nhạt nhẽo trông thật nhàm chán. Làm nổi bật chúng với hiệu ứng bóng hộp CSS!

CSS là ngôn ngữ mà các nhà phát triển sử dụng để tạo kiểu cho trang web. Nó kiểm soát cách các phần tử HTML được hiển thị trên màn hình, trên giấy hoặc trong bất kỳ hình thức phương tiện nào khác. CSS cung cấp toàn bộ sức mạnh tùy chỉnh để tạo kiểu cho trang web theo hình ảnh của riêng bạn.

Bạn có thể thay đổi màu nền, kiểu phông chữ, màu phông chữ, bóng hộp, lề và nhiều thuộc tính khác của phần tử bằng cách sử dụng CSS. Chúng tôi sẽ hướng dẫn bạn một số cách sử dụng hiệu quả của bóng hộp trong hướng dẫn này.

CSS box-shadow là gì?

Thuộc tính box-shadow được sử dụng để áp dụng bóng cho các phần tử HTML. Đây là một trong những thuộc tính CSS được sử dụng nhiều nhất để tạo kiểu cho hộp hoặc hình ảnh.

Cú pháp CSS:

  

box-shadow

:

[offset ngang]

[độ lệch dọc]

[bán kính mờ]

[bán kính trải rộng tùy chọn]

[color]

;
  1. độ lệch ngang: Nếu độ lệch ngang là dương, bóng sẽ ở bên phải của hộp. Và nếu độ lệch ngang là âm, thì bóng sẽ ở bên trái của hộp.
  2. độ lệch dọc: Nếu độ lệch dọc là dương, bóng sẽ nằm bên dưới hộp. Và nếu độ lệch dọc là âm, thì bóng sẽ ở trên hộp.
  3. bán kính mờ: Giá trị càng cao, bóng sẽ càng mờ.
  4. bán kính lan rộng: Nó cho biết mức độ lan tỏa của bóng. Giá trị dương làm tăng độ lan truyền của bóng, giá trị âm làm giảm độ lan truyền.
  5. Màu sắc: Nó biểu thị màu sắc của bóng. Ngoài ra, nó hỗ trợ bất kỳ định dạng màu nào như rgba, hex hoặc hsla.

Các thông số về độ mờ, độ lan rộng và màu sắc là tùy chọn. Phần thú vị nhất của box-shadow là bạn có thể sử dụng dấu phẩy để phân tách các giá trị box-shadow bất kỳ lúc nào. Điều này có thể được sử dụng để tạo nhiều đường viền và bóng trên các phần tử.

1. Thêm bóng mờ hộp vào Trái, Phải và Dưới cùng của Hộp

Bạn có thể thêm bóng mờ vào ba mặt (trái, phải và dưới cùng) của hộp bằng cách sử dụng CSS bóng hộp sau với phần tử HTML mục tiêu của bạn:

  

box-shadow

:

rgba

( 149, 157, 165, 0

. 2

) 0

px

8

px

24

px

;

Kết quả:

box-shadow Kiểu 1

2. Thêm bóng mờ vào Tất cả các mặt

Bạn có thể thêm bóng sáng vào tất cả các mặt của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn:

  

box-shadow

:

rgba < / p> (100, 100, 111, 0

. 2

) 0

px

7 < p class = "hljs-selector-tag"> px

29

px

0

px ;

Kết quả:

box-shadow Kiểu 2

3. Thêm một bóng hộp mỏng vào Bottom và Right Sides

Bạn có thể thêm bóng vào phía dưới và bên phải của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn:

  

box-shadow

:

rgba

( 0, 0, 0, 0

. 15

) 1

. 95px

1

. 95px

2

. 6px

;

Kết quả:

box-shadow Kiểu 3

4. Thêm Dark box-shadow vào Tất cả các mặt

Bạn có thể thêm bóng tối cho tất cả các mặt của hộp bằng cách sử dụng CSS tạo bóng tối sau đây với phần tử HTML mục tiêu của bạn:

  

box-shadow

:

rgba

( 0, 0, 0, 0

. 35

) 0

px

5

px

15

px

;

Kết quả:

box-shadow Kiểu 4

5. Thêm Spread Shadow vào tất cả các mặt

Bạn có thể thêm bóng trải rộng vào tất cả các mặt của hộp bằng lệnh sau với phần tử HTML mục tiêu của mình:

  

box-shadow

:

rgba

( 0, 0, 0, 0

. 25

) 0

px

54

px

55

px

,

rgba

(0 , 0, 0, 0

. 12

) 0

px

- 12px

30

px

,

rgba

(0, 0, 0, 0

. 12

) 0

px

4

px

6

px

,

rgba

(0, 0 , 0, 0

. 17

) 0

px

12

px

13

px

,

rgba

(0, 0, 0, 0

. 09

) 0

px

- 3px

5

px

;

Kết quả:

box-shadow Style 5

6. Thêm bóng viền mỏng cho tất cả các mặt

Bạn có thể thêm bóng đường viền đơn giản vào tất cả các mặt của hộp bằng cách sử dụng CSS sau với phần tử HTML mục tiêu của bạn:

  

box-shadow

:

rgba < / p> (6, 24, 44, 0

. 4

) 0

px

0 < p class = "hljs-selector-tag"> px

0

px

2

px ,

rgba

(6, 24, 44, 0

. 65

) 0

px

4

px

6

px

- 1px

,

rgba

(255, 255, 255, 0

. 08

) 0

px

1

px

0

px

in

;

Kết quả:

box-shadow Kiểu 6

7. Thêm bóng hộp vào Mặt dưới và Mặt trái

Bạn có thể thêm bóng đổ vào bên dưới và bên trái của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của mình:

  

box-shadow

:

rgba

( 0, 0, 0, 0

. 1

)

- 4px

9

px

25

px

- 6px

; < / code>

Kết quả:

box-shadow Style 7

8. Thêm một Làm mờ bóng hộp đối với Mặt trên và Mặt trái, Bóng tối ở Mặt dưới và Mặt phải

Bạn có thể thêm bóng sáng vào phía trên và bên trái của hộp cũng như bóng tối ở phía dưới và bên phải của hộp bằng cách sử dụng CSS sau với phần tử HTML mục tiêu của bạn:

  

box-shadow

:

rgba

( 136, 165, 191, 0

. 48

) 6

px

2

px

16

px

0

px

, < p class = "hljs-selector-tag"> rgba

(255, 255, 255, 0

. 8

)

- 6px

- 2px

16

px

0

px

;

Kết quả:

box-shadow Style 8

9. Thêm Bóng viền mỏng, có màu cho tất cả các mặt

Bạn có thể thêm bóng đường viền có màu đơn giản vào tất cả các mặt của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn:

  

box-shadow

:

rgba < / p> (3, 102, 214, 0

. 3

) 0

px

0 < p class = "hljs-selector-tag"> px

0

px

3

px ;

Kết quả:

box-shadow Kiểu 9

10. Thêm Nhiều Bóng Đường Viền Màu vào Mặt Dưới và Mặt Trái của Hộp

Bạn có thể thêm nhiều bóng đường viền màu vào các cạnh dưới và bên trái của hộp bằng cách sử dụng CSS sau với phần tử HTML mục tiêu của bạn:

  

box-shadow

:

rgba

( 50, 50, 93, 0

. 25

) 0

px

30

px

60

px

- 12px

inset

,

rgba

(0, 0, 0, 0

. 3

) 0

px

18

px

36

px

- 18px

inset

;

Kết quả:

box-shadow Kiểu 10

11. Thêm Nhiều Bóng Đường Viền Nhiều Màu vào Dưới cùng

Bạn có thể thêm nhiều bóng đường viền màu vào cuối hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của mình:

  

box-shadow

:

rgba

( 240, 46, 170, 0

. 4

) 0

px

5

px

,

rgba

(240, 46, 170, 0

.3

) 0

px

10

px

,

rgba

(240, 46, 170, 0

. 2

) 0

px

15

px

,

rgba

(240, 46, 170, 0

. 1

) 0

px

20

px

,

rgba

(240, 46, 170, 0

. 05

) 0

px

25

px

;

Kết quả:

box-shadow Kiểu 11

12. Thêm Nhiều Bóng Đường viền Màu vào Mặt dưới và Mặt phải của Hộp

Bạn có thể thêm nhiều bóng đường viền màu vào cạnh dưới và bên phải của hộp bằng cách sử dụng CSS sau với phần tử HTML mục tiêu của bạn:

  

box-shadow

:

rgba

( 240, 46, 170, 0

. 4

) 5

px

5

px

,

rgba

(240, 46, 170, 0

.3

) 10

px

10

px

,

rgba

(240, 46, 170, 0

. 2

) 15

px

15

px

,

rgba

(240, 46, 170, 0

. 1

) 20

px

20

px

,

rgba

(240, 46, 170, 0

. 05

) 25

px

25

px

;

Kết quả:

box-shadow Kiểu 12

13. Thêm Bóng sáng vào Mặt trái và Mặt phải, Trải bóng vào Dưới cùng

Bạn có thể thêm bóng sáng cho các bên trái và phải và trải bóng xuống dưới cùng của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn:

  

box-shadow

:

rgba

( 0, 0, 0, 0

. 09

) 0

px

2

px

1

px

,

rgba

(0 , 0, 0, 0

. 09

) 0

px

4

px

2

px

,

rgba

(0, 0, 0, 0

. 09

) 0

px

8

px

4

px

,

rgba

(0, 0 , 0, 0

. 09

) 0

px

16

px

8

px

,

rgba

(0, 0, 0, 0

. 09

) 0

px

3 2

px

16

px

;

Đầu ra:

box-shadow Kiểu 13

Tích hợp CSS với một trang HTML

Giờ bạn đã biết cách thêm các hiệu ứng bóng hộp thú vị bằng cách sử dụng CSS, bạn có thể dễ dàng tích hợp chúng với các phần tử HTML theo nhiều cách.

Liên quan: 11 Công cụ hữu ích để kiểm tra, làm sạch và tối ưu hóa tệp CSS

Bạn có thể nhúng nó vào chính trang HTML hoặc đính kèm nó dưới dạng một tài liệu riêng biệt. Có ba cách để đưa CSS vào tài liệu HTML:

CSS nội bộ

Trang tính kiểu nội bộ hoặc được nhúng được chèn trong phần & lt; head & gt; của tài liệu HTML bằng cách sử dụng phần tử & lt; style & gt; . Bạn có thể tạo bất kỳ số lượng phần tử & lt; style & gt; nào trong tài liệu HTML, nhưng chúng phải được đặt giữa & lt; head & gt; & lt; / head & gt; các thẻ . Dưới đây là một ví dụ minh họa cách sử dụng CSS nội bộ với tài liệu HTML:

  

& lt;

! DOCTYPE html

& gt;
& lt; html lang =

"vi"

dir =

"ltr"

& gt;

& lt;

head

& gt;


& lt ;

meta charset = "utf-8"

& gt;


& lt;

title

& gt;

CSS box-shadow

& lt;

/ title

& gt;


& lt;

style type = "text / css"

& gt;


. tiêu đề

{
text-align: center;
}

.image-box

{
display: block;
margin-left: auto;
margin-right: auto;

box-shadow

:

rgba

(0, 0, 0, 0

.35

) 0

px

5

px

15

px

;
}

& lt;

/ style

& gt;


& lt;

/ head

& gt;


& lt;

body

& gt;


& lt;

div

& gt;


& lt;

h2 class = "header"

& gt;

Kiểu 4

& lt;

h2

& gt;


& lt; img

class

=

"image-box"

src =

"MUO.jpg"

& gt;

& lt;

/ div

& gt;


& lt;

/ body

& gt;


& lt;

/ html

& gt;

CSS nội tuyến

CSS nội tuyến được sử dụng để thêm các quy tắc kiểu duy nhất vào phần tử HTML. Nó có thể được sử dụng với một phần tử HTML thông qua thuộc tính style . Thuộc tính style chứa các thuộc tính CSS ở dạng "property: value" được phân tách bằng dấu chấm phẩy (; ).

Liên quan: Tìm hiểu cách tạo trang web hai chiều bằng lưới CSS

Tất cả các thuộc tính CSS phải nằm trong một dòng, tức là không được có dấu ngắt dòng giữa các thuộc tính CSS. Dưới đây là một ví dụ minh họa cách sử dụng CSS nội tuyến với tài liệu HTML:

  

& lt;

! DOCTYPE html

& gt;


& lt; html lang =

"vi"

dir =

"ltr"

& gt;

& lt;

head

& gt;


& lt; meta charset = "utf-8"

& gt;


& lt;

title

& gt;

CSS box-shadow

& lt;

/ title

& gt;


& lt;

/ head

& gt;


& lt;

body

& gt;


& lt;

div

& gt;


& lt; h2

class

= < p class = "hljs-string"> "header"

style =

"text-align: center;"

& gt; Kiểu

4

& lt; h2 & gt;
& lt; img src =

" MUO.jpg "

class

=

"image-box"

style =

"box-shadow: rgba (0, 0, 0, 0.35) 0px 5px 15px; hiển thị: khối; margin-left: tự động; margin-right: auto; "

& gt;

& lt;

/ div

& gt;

& lt;

/ body

& gt;


& lt;

/ html

& gt;

CSS bên ngoài

CSS bên ngoài là cách lý tưởng nhất để áp dụng kiểu cho tài liệu HTML. Biểu định kiểu bên ngoài chứa tất cả các quy tắc kiểu trong một tài liệu riêng biệt (tệp .css), tài liệu này sau đó được liên kết với tài liệu HTML bằng thẻ & lt; link & gt; . Phương pháp này là phương pháp tốt nhất để xác định và áp dụng các kiểu cho tài liệu HTML vì tệp HTML bị ảnh hưởng yêu cầu thay đổi tối thiểu trong đánh dấu. Dưới đây là một ví dụ minh họa cách sử dụng CSS bên ngoài với tài liệu HTML:

Tạo tệp CSS mới có phần mở rộng .css . Bây giờ, hãy thêm mã CSS sau vào trong tệp đó:

  

. tiêu đề

{
text-align: center;
} < br />

. image-box

{
display: block;
margin-left: auto;
margin-right: auto;

box-shadow

:

rgba

(0, 0, 0, 0

. 35

) 0

px

5

px

15

px

;
}

Cuối cùng, hãy tạo một tài liệu HTML và thêm mã sau vào bên trong tài liệu đó:

  

& lt;

! DOCTYPE html

& gt;


& lt; html lang =

"vi"

dir =

"ltr"

& gt;

& lt;

head

& gt;


& lt; meta charset = "utf-8"

& gt;


& lt;

title

& gt;

CSS box-shadow

& lt;

/ title

& gt;


& lt; link rel =

"stylesheet"

href =

"styles.css"

& gt; < br />

& lt;

/ head

& gt;


& lt;

body

& gt;


& lt;

div

& gt;


& lt;

h2 class =" header "

& gt; < / p> Kiểu 4

& lt;

h2

& gt;


& lt; i mg

class

=

"image-box"

src =

"MUO.jpg"

& gt;

& lt;

/ div

& gt;


& lt;

/ body

& gt;

< br />

& lt;

/ html

& gt;

Lưu ý rằng tệp CSS được liên kết với tài liệu HTML qua thẻ & lt; link & gt; và thuộc tính href .

Tất cả ba phương pháp trên (CSS nội bộ, CSS nội tuyến và CSS bên ngoài) sẽ hiển thị cùng một đầu ra-

box-shadow Style 4

Làm cho trang web của bạn trở nên trang nhã với CSS

Bằng cách sử dụng CSS, bạn có toàn quyền kiểm soát kiểu dáng của trang web của mình. Bạn có thể tùy chỉnh mọi phần tử HTML bằng cách sử dụng các thuộc tính CSS khác nhau. Các chuyên gia từ khắp nơi trên thế giới đang đóng góp vào các bản cập nhật CSS và họ đã làm như vậy kể từ khi phát hành vào năm 1996. Do đó, người mới bắt đầu có rất nhiều điều để học!

May mắn thay, CSS thân thiện với người mới bắt đầu. Bạn có thể có được một số phương pháp thực hành tuyệt vời bằng cách bắt đầu với một vài lệnh đơn giản và xem khả năng sáng tạo của bạn sẽ đưa bạn đến đâu.


Xem thêm những thông tin liên quan đến chủ đề hộp bóng trong ví dụ css

ĐẦU TƯ CỔ PHIẾU KHI KINH TẾ ĐÌNH TRỆ VÀ LẠM PHÁT CAO - Bàn tròn đầu tư Số 02

alt

  • Tác giả: Tài chính & Kinh doanh
  • Ngày đăng: 2022-06-22
  • Đánh giá: 4 ⭐ ( 7458 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bối cảnh hàng loạt cổ phiếu đã theo đà giảm đến 30-40% từ đầu năm, cá biệt có những cổ phiếu giảm giá trị đến 70% cùng với các tin xấu từ thị trường tài chính Mỹ khiến VN-Index chính thức thủng mốc 1.200 điểm. Chúng ta sẽ cùng ngồi lại trong chương trình “Bàn tròn đầu tư”, lên sóng tối thứ Tư ngày 22/06/2022 và nhận được sự chia sẻ và nhận định thị trường từ các chuyên gia.
    Talkshow “Bàn tròn đầu tư” số 2 sẽ có sự xuất hiện của Mr Lynch Phan (Linh Phan) - Founder và Giám đốc chuyên môn sản phẩm của Công ty Take profit investment holdings.
    Anh Linh đã có hơn 10 năm kinh nghiệm đầu tư chứng khoán và là nhà tư vấn và đào tạo cho hơn 20.000 lượt học viên nhà đầu tư trong và ngoài nước về đầu tư tài chính, chứng khoán
    dautu cophieu
    ---
    TaiChinhKinhDoanh
    Cộng đồng Cố vấn tài chính Việt Nam - Vietnam Wealth Advisors (VWA)
    Facebook: https://www.facebook.com/groups/CoVanTaichinhVietnam
    Tiktok: https://www.tiktok.com/@taichinhkinhdoanhafa
    Spotify: https://open.spotify.com/show/4fVFOPGua325fIsoTvW6M6
    Liên hệ AFA Capital: http://afacapital.vn
    ----
    TOPI - Đầu tư thông minh- Tài chính thịnh vượng
    📲 Download ứng dụng và trải nghiệm tại: https://app.topi.vn/download
    🌐 Website Topi: https://topi.vn/
    🌏 Fanpage: https://www.facebook.com/topivn
    ---
    📝 Đọc hiểu & Phân tích báo cáo tài chính: https://www.afa.edu.vn/doc-hieu-bao-cao-tai-chinh/
    - Chương trình cung cấp cho người học một nền tảng kiến thức căn bản và toàn diện về khả năng đọc từng thông tin trên báo cáo tài chính, đồng thời giải thích tại sao lại trình bày thông tin đó trên BCTC. Chương trình cũng sẽ cung cấp kiến thức và công cụ phân tích các chỉ số tài chính theo chuẩn quốc tế trong bối cảnh thị trường tài chính Việt Nam.
    ---
    📈 CGBA: Phân tích Tài chính và Kinh doanh toàn cầu: https://www.afa.edu.vn/phantichtaichinh/
    - CGBA: Phân tích tài chính và kinh doanh toàn cầu (Certified Global Business Analyst) là chương trình theo chuẩn phân tích của các quỹ đầu tư lớn trên thế giới, với sự kết hợp đặc biệt giữa phân tích tài chính và phân tích kinh doanh chiến lược nhằm giúp cho học viên được trang bị phương pháp phân tích toàn diện khi đánh giá một doanh nghiệp và một ngành kinh doanh. phantichtaichinh
    ---
    💰 WealthIntelligence - Tài chính cá nhân và Quản lý tài sản đầu tư: https://www.afa.edu.vn/wealth-intelligence/
    - Wealth Intelligence phục vụ cho các cá nhân có mong muốn xây dựng cho bản thân mục tiêu đạt tự do tài chính phù hợp và phương pháp để đạt được mục tiêu sớm nhất, và những ai muốn bắt đầu con đường trở thành cố vấn tài chính công chứng chuyên nghiệp.

    - FANPAGE AFA: http://bit.ly/378FQKM

[Tự học CSS] – Tìm hiểu về hiệu ứng đổ bóng văn bản trong CSS

  • Tác giả: ninhbinhweb.info
  • Đánh giá: 3 ⭐ ( 8189 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, mình và các bạn cùng nhau tìm hiểu về thuộc tính mới, thuộc tính này dùng để tạo ra các hiệu ứng đổ bóng trong văn bản để làm cho web...

Bảng trong CSS

  • Tác giả: comdy.vn
  • Đánh giá: 5 ⭐ ( 4405 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho bảng trong HTML bằng CSS.

Thuộc tính Text-shadow/Box-shadow trong CSS

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 2466 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hiệu ứng đổ bóng cho văn bản trong CSS, Hiệu ứng đổ bóng cho phần tử trong CSS

Đổ bóng trong CSS

  • Tác giả: handsomeroot.blogspot.com
  • Đánh giá: 5 ⭐ ( 9832 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đổ bóng trong CSS

Bài 10: Mô hình hộp (Box Model) trong CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 9775 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về mô hình hộp trong CSS, hiểu được thế nào là: Margin, Padding, Border và content. Cách tính chiều rộng, chiều cao của 1 phần tử.

Các ví dụ CSS Box Shadow – Init HTML

  • Tác giả: www.inithtml.com
  • Đánh giá: 4 ⭐ ( 9367 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thông thường, để tạo hiệu ứng đổ bóng ta thường sử dụng hình ảnh, tuy nhiên với cách này thì làm cho trang web tải...

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Chương 3 **CHỦ NGHĨA DUY VẬT LỊCH SỬ A. MỤC TIÊU Về - ke thua trong c++

By ads_php