Làm cách nào để đặt bóng in bằng CSS? – hộp chèn bóng 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.

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