CSS3 thuộc tính đổ bóng trong css, thuộc tính box-shadow

Chào các bạn trong chia sẻ này mình sẽ chia sẻ cùng các bạn 1 thuộc tính khá mạnh mẽ của CSS3 trong việc phát triển giao diện thiết kế web ngày nay đó là thuộc tính đổ bóng trong css box-shadow. Đây là thuộc tính khá mạnh mẽ trong css nhằm hỗ trợ các nhà thiết kế, lập trình website thể hiện đối tượng đổ bóng. Cú pháp của thuộc tính box-shadow trong CSS bạn có thể thực hiện như sau:

Hiện tại bạn có thể dễ dàng xem hiển thị và lấy mã css thuộc tính này qua công cụ chia sẻ tại: http://polygonexpress.com/cong-cu-ho-tro-tu-dong-sinh-ma-thuoc-tinh-box-shadow-trong-css.html

box-shadow:outset,inset/h-offset v-offset blur spread color;

Thuộc tính này cho phép bạn đổ bóng ra bên ngoài/ hoặc bên trong. Ngoài ra nó còn cho phép bạn tuỳ chỉnh đổ bóng toàn bộ, bên trái, bên phải, bên trên hoặc bên dưới đối tượng thẻ tag bạn muốn (ví dụ thẻ DIV)

Ví dụ mình sẽ áp dụng thuộc tính box-shadow này cho thẻ div với cú pháp như sau:

<div style='-webkit-box-shadow:0 0 4px #000; box-shadow: 0 0 4px #000;'>
//Put your content or content HTML here;
<strong>CSS3 box shadow on left top right bottom of an element only</strong>
</div>

Thể hiện của mã CSS trên trình duyệt web của bạn:

//Đây là vùng bạn đặt nội dung hoặc nội dung HTML của bạn.

Cú pháp box-shadow thể hiện từng biên (bên trái/ bên phải/ bên trên/ bên dưới/ toàn bộ đối tượng)

Thể hiện của thuộc tính box-shadow bên TRÁI đối tượng.

 

-webkit-box-shadow: -4px 0 4px -4px #000;
box-shadow: -4px 0 4px -4px #000;
/*hoặc*/
box-shadow: -4px 0 4px -4px rgba(0,0,0,4);
-moz-box-shadow: -4px 0 4px -4px rgba(0,0,0,4);
-webkit-box-shadow: -4px 0 4px -4px rgba(0,0,0,4);
-o-box-shadow: -4px 0 4px -4px rgba(0,0,0,4);

 

Thể hiện của thuộc tính box-shadow bên TRÊN đối tượng.
<div style=’-webkit-box-shadow: -4px 0 4px -4px #000;box-shadow: -4px 0 4px -4px #000;’>
//Put your content or HTML content here;
</div>

-webkit-box-shadow:0 -4px 4px -4px #000;
box-shadow: 0 -4px 4px -4px #000;
/*hoặc*/
box-shadow: 0 -4px 4px -4px rgba(0,0,0,4);
-moz-box-shadow: 0 -4px 4px -4px rgba(0,0,0,4);
-webkit-box-shadow: 0 -4px 4px -4px rgba(0,0,0,4);
-o-box-shadow: 0 -4px 4px -4px rgba(0,0,0,4);

 

Thể hiện của thuộc tính box-shadow bên trái PHẢI tượng.

 

-webkit-box-shadow: 4px 0 4px -4px #000;
box-shadow: 4px 0 4px -4px #000;
/*hoặc*/
box-shadow: 4px 0 4px -4px rgba(0,0,0,4);
-moz-box-shadow: 4px 0 4px -4px rgba(0,0,0,4);
-webkit-box-shadow: 4px 0 4px -4px rgba(0,0,0,4);
-o-box-shadow: 4px 0 4px -4px rgba(0,0,0,4);

 

Thể hiện của thuộc tính box-shadow bên DƯỚI đối tượng.

 

-webkit-box-shadow:0 4px 4px -4px #000;
box-shadow:0 4px 4px -4px #000;
/*hoặc*/
box-shadow:0 4px 4px -4px rgba(0,0,0,4);
-moz-box-shadow:0 4px 4px -4px rgba(0,0,0,4);
-webkit-box-shadow:0 4px 4px -4px rgba(0,0,0,4);
-o-box-shadow:0 4px 4px -4px rgba(0,0,0,4);

 

Thể hiện của thuộc tính box-shadow trên TOÀN BỘ đối tượng.

 

box-shadow: 0 0 4px #000;
-webkit-box-shadow: 0 0 4px #000;
/*or*/
box-shadow: 0 0 4px rgba(0,0,0,4);
-moz-box-shadow: 0 0 4px rgba(0,0,0,4);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,4);
-o-box-shadow: 0 0 4px rgba(0,0,0,4);

Chúc các bạn có thể hiểu thêm 1 chút về thuộc tính đổ bóng trong css trong việc học tập cũng như sự mạnh mẽ của nó trong việc xây dựng giao diện website của mình.

Thân !

Related Posts

About The Author

Add Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.