Làm cách nào để đặt bóng in bằng CSS? – hộp chèn bóng css

Cổng thông tin Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, được tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : inset box shadow css

Trong CSS, thuộc tính thêm hiệu ứng đổ bóng xung quanh khung của phần tử. Chúng ta có thể đặt nhiều hiệu ứng xung quanh một phần tử được phân tách bằng dấu phẩy. A được định nghĩa là các giá trị bù đắp tương đối X và Y đối với phần tử, độ mờ và bán kính trải rộng cũng như màu sắc.

Trong bài viết này, chúng ta sẽ tìm hiểu cách đặt bóng bên trong bằng cách sử dụng CSS. Thuộc tính Inset thay đổi bóng bên ngoài thành bóng bên trong.

Lưu ý: Theo mặc định, bóng tạo bên ngoài hộp nhưng bằng cách sử dụng chúng ta có thể tạo bóng bên trong hộp.

Cú pháp:

box-shadow: h-offset v-offset mờ trải màu | inset;

Cách tiếp cận: Để tạo bóng cho một phần tử, chúng tôi sẽ sử dụng thuộc tính. Trong thuộc tính, chúng tôi sẽ xác định giá trị (Bắt buộc đối với hiệu ứng bóng ngang), sau đó là giá trị bù đắp v (Bắt buộc đối với hiệu ứng bóng dọc).

Chúng tôi cũng có thể tạo hiệu ứng và trải bóng bằng cách sử dụng các giá trị làm mờ và lan truyền. Cuối cùng, chúng tôi sẽ sử dụng từ khóa sẽ thay đổi bóng bên trong khung.

Xem Thêm  CAST và CHUYỂN ĐỔI (Transact-SQL) - SQL Server - chuỗi tsql thành int

Ví dụ 1:

HTML


& lt;! DOCTYPE html & gt;

< code class = "trơn"> & lt; html & gt;

& lt; head & gt;

& lt; < / code> style & gt;

# GFG {

/ * Để cung cấp đường viền cho phần tử * /

border : 1px solid;

/ * Dành cho Padding * /

padding: 10px;

/ * Xác định nội dung thuộc tính box-shadow * /

box-shadow: 5px 10px green inset;

}

< code class = "trơn"> h2 {

color : green;

}

& lt; / style & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; h2 & gt; Box-shadow: 5px 10px inset: & lt; / h2 & gt;

< p class = "line number24 index23 alt1"> & lt; div id = "GFG" & gt;

& lt; p & gt; Chào mừng bạn đến với GeeksforGeeks & lt; / p & gt;

& lt; / div < / code> & gt;

& lt; / body & gt;

& lt; / html & gt;

 
 

Đầu ra:

Giải thích: Trong ví dụ trên , chúng tôi đã đặt giá trị là 5px, giá trị v-offset là 10px và màu là xanh lục.

Ví dụ 2:

HTML

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; head & gt;

& lt; style & gt;

# GFG {

/ * Để cung cấp đường viền cho phần tử * /

border: 1px solid;

/ * Dành cho Padding * /

padding: 10px;

/ * Xác định thuộc tính box-shadow dưới dạng nội dung * /

box-shadow: 5px 10px 20px 5px Green inset;

}

h2 {

color: green;

}

& lt ; / style & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; h2 & gt; box-shadow: 5px 10px 20px 5px Màu xanh lục: & lt; / h2 & gt;

& lt; div id = < / code> "GFG" & gt;

& lt; p & gt; Inset, Green, Spread và Blur. & lt; / p & gt;

& lt; / div & gt;

& lt; / body & gt;

& lt; / html & gt;

 
 

Đầu ra:

< mạnh> Explan ation: Trong ví dụ trên, chúng tôi đã đặt giá trị là 5px, giá trị v-offset là 10px, giá trị mờ là 20px, trải rộng giá trị là 5px và màu là xanh lục.

Hỗ trợ trình duyệt

Trình duyệt

Phiên bản

Chrome

10.0 4.0 -webkit- < / p>

Internet Explorer

9.0

Firefox

4.0 3.5 -moz-

Safari

5.1 3.1 -webkit-

Opera

10.5

Ghi chú cá nhân của tôi


Xem thêm những thông tin liên quan đến chủ đề hộp chèn bóng css

[Chương 3] Bài 5: Shadow trong CSS toàn tập

alt

  • Tác giả: evondev
  • Ngày đăng: 2021-01-17
  • Đánh giá: 4 ⭐ ( 7928 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 👉 Đây là video mình lấy ra từ khoá học HTML CSS cơ bản tới nâng cao của mình, nếu các bạn muốn xem hết tất cả series thì có thể tham khảo mua ủng hộ mình tại đây nha: https://evondev.com/khoa-hoc-html-css
    👉 Kết nối với mình
    Fanpage: https://www.facebook.com/evondevblog/
    Facebook: https://www.facebook.com/tuan.trananh.0509
    Blog: https://evondev.com
    Nhóm của mình: https://www.facebook.com/groups/2565163230401512
    Học online với mình: https://www.facebook.com/messages/t/tuan.trananh.0509
    👉 Công cụ, tài nguyên
    - Theme: Dracula Official
    - Font chữ: SF Mono, 14px
    - Packages: Prettier, Material Icon, Highlight Matching Tag, Bracket Pair Colorizer, HTML Snippets, Live Server.
    - Extension: Eye Dropper color picker Chrome Extension, color slurp MacOS, visBug Chrome Extension

Hiệu ứng Shadow trong CSS

  • Tác giả: quantrimang.com
  • Đánh giá: 5 ⭐ ( 3217 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính Shadow trong CSS được sử dụng để thiết lập bóng cho các phần tử thành phần trong website.

Cách tạo bóng đổ với thuộc tính drop-shadow của CSS

  • Tác giả: funix.edu.vn
  • Đánh giá: 4 ⭐ ( 3324 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS box-shadow không phải là một tính năng CSS duy nhất tạo hiệu ứng đổ bóng. Cùng FUNiX tìm hiểu cách thức và thời điểm sử dụng drop-shadow trong bài viết dưới đây.

Tạo Hộp Tìm kiếm CSS3 Rocking / Thiết kế web

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 4 ⭐ ( 5010 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS3 là ngôn ngữ bảng kiểu thế hệ tiếp theo. Nó giới thiệu rất nhiều tính năng mới và thú vị như bóng tối, hình động, chuyển tiếp, bán kính đường viền

Tìm hiểu về hiệu ứng đổ bóng văn bản trong CSS

  • Tác giả: lethach.com
  • Đánh giá: 4 ⭐ ( 2710 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nơi chia sẻ những kiến thức bổ ích về lập trình Website, cách để tối ưu hóa công cụ tìm kiếm trong SEO, giới thiệu về các plugin và các kỹ xảo hay dùng trong WordPress.

Bóng đổ cho hình ảnh PNG trong CSS

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 4382 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Đến bữa tiệc muộn một chút, nhưng đúng vậy, hoàn toàn có thể tạo bóng đổ…

Cách sử dụng box-shadow và text-shadow trong CSS

  • Tác giả: vietgiatrang.com
  • Đánh giá: 5 ⭐ ( 3587 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách sử dụng text-shadow và box-shadow trong CSS. Tạo hiệu ứng đổ bóng cho các đối tượng trên website...

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