• Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web
  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Hướng dẫn các cách box-shadow trong css mới nhất 2020

ATPMedia Bởi ATPMedia
3 năm cách đây
Trong Kiến thức Tin học
Trang chủ Kiến thức Tin học

Box Shadow Trong Css

 

Hướng dẫn các cách box-shadow trong css mới nhất 2020.

Hiệu ứng tạo bóng vùng giao diện box-shadow trong CSS

tải ngày: 04/06/2019 lúc 16:44:28 bởi dammio
551 view
Thể loại: design website
IFrame
Hướng dẫn các cách box-shadow trong css mới nhất 2020
Hướng dẫn các cách box-shadow trong css mới nhất 2020
Hướng dẫn các cách box-shadow trong css mới nhất 2020
Hướng dẫn các cách box-shadow trong css mới nhất 2020
Hướng dẫn các cách box-shadow trong css mới nhất 2020
Hướng dẫn các cách box-shadow trong css mới nhất 2020
  • CSS Selector (bộ chọn) là gì và phương pháp sử dụng? – 16 tháng 08, 2019 lúc 1:27:10 Sáng
  • Căn giữa CSS – 04 tháng 06, 2019 lúc 4:06:45 Chiều
  • tut mẹo thiết kế bố cục giao diện web bằng FlexBox – 17 tháng 05, 2019 lúc 9:45:04 Sáng
  • tìm hiểu về Grid, bố cục xây dựng giao diện website trong CSS – 16 tháng 05, 2019 lúc 8:45:09 Chiều
  • phương pháp căn giữa phần tử trong CSS – 14 tháng 05, 2019 lúc 3:11:29 Chiều

Khi thiết kế giao diện web, bạn đủ sức dùng thuộc tính box-shadow cho vùng giao diện nào đó để tăng trưởng hiệu ứng Quan sát trực quan và thẩm mỹ cho trang. tính chất CSS này đều được support ở tất cả trình duyệt website phiên bản mới nhất, vì thế bạn cứ yên tâm sử dụng.

tính chất box-shadow

thuộc tính này dùng để tạo bóng mờ cho một vùng giao diện hay phần tử HTML (thường dạng khối – block). Cú pháp:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Trong đó tham số none là k tạo bóng, h-offset và v-offset là vị trí bóng theo tọa độ ngang/dọc. Tham số blur và spread là hai số tùy lựa chọn sử dụng làm mờ bóng và tăng trưởng giảm click thước bóng. Tham số color là màu của bóng, còn inset là tạo bóng bên trong, thay vì bên ngoài vùng giao diện. Tham số initial là xây dựng trị giá bóng mặc định, còn inherit là kế thừa các CSS của phần tử cha.

Tạo bóng với tham số h-offset, v-offset, blur và color

Ở ví dụ này, chúng ta sẽ tạo bóng mờ và với màu sắc của bóng cũng giống như vị trí xuất hiện của bóng.
Hướng dẫn các cách box-shadow trong css mới nhất 2020

IFrame
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
DOCTYPE html>
<html>
<head>
<phong cách>
#div1
width:50%;
border: 1px solid;
padding: 10px;
box-shadow: 1px 1px 1px #AAA;
#div2
width:50%;
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px 5px yellow;
style>
head>
<body>
<h1>Ví dụ tạo bóng <a href="https://www.dammio.com">dammio.coma>h1>
<h2>box-shadow: 1px 1px 1px #AAA: --- dammio.comh2>
<div id="div1">
<p>Tạo bóng cho vùng div với h-offser = 1px, v-offset = 1px và độ blur = 1px.p>
div>
<h2>box-shadow: 5px 5px 5px yellow: --- dammio.comh2>
<div id="div2">
<p>Tạo bóng cho vùng div với h-offser = 5px, v-offset = 5px và độ blur = 10px, màu bóng là màu vàng.p>
div>
body>
html>

Tạo bóng với tham số spread

Tham số spread giúp trải rộng kích thước bóng, bạn đủ sức thử thông qua gợi ý sau.
Hướng dẫn các cách box-shadow trong css mới nhất 2020

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
DOCTYPE html>
<html>
<head>
<phong cách>
#div1
width:50%;
border: 1px solid;
padding: 10px;
box-shadow: 1px 1px 1px 5px #AAA;
style>
head>
<body>
<h1>Ví dụ tạo bóng <a href="https://www.dammio.com">dammio.coma>h1>
<h2>box-shadow: 1px 1px 1px #AAA: --- dammio.comh2>
<div id="div1">
<p>Tạo bóng cho vùng div với h-offser = 1px, v-offset = 1px, độ blur = 1px và spread=10px.p>
div>
body>
html>

Tạo nhiều bóng 1 lúc

Ứng với mỗi bóng bạn chỉ cần khái niệm phương pháp nhau dấu phẩy trong tính chất box-shadow. Điều này giúp bạn tạo nhiều bóng, thậm chí tạo được cả hiệu ứng cầu vồng nếu muốn.
Hướng dẫn các cách box-shadow trong css mới nhất 2020

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
DOCTYPE html>
<html>
<head>
<style>
#div1
width:50%;
border: 1px solid;
padding: 10px;
box-shadow: 10px 10px blue, 20px 20px red, 30px 30px yellow;
#div2
width:50%;
border: 1px solid;
padding: 10px;
box-shadow: 10px 10px 5px blue, 20px 20px 5px red, 30px 30px 5px yellow;
phong cách>
head>
<body>
<h1>Ví dụ tạo bóng <a href="https://www.dammio.com">dammio.coma>h1>
<h2>box-shadow: 10px 10px blue, 20px 20px red, 30px 30px yellow: --- dammio.comh2>
<div id="div1">
<p>Tạo nhiều bóngp>
div>
<br/><br/>
<h2>box-shadow: 10px 10px 5px blue, 20px 20px 5px red, 30px 30px 5px yellow: --- dammio.comh2>
<div id="div2">
<p>Tạo nhiều bóng có độ mờ (blur)p>
div>
body>
html>

Tạo bóng bên trong

ví dụ này dùng tham số inset dùng để tạo bóng bên trong vùng giao diện thay vì bên ngoài như thông thường.
Hướng dẫn các cách box-shadow trong css mới nhất 2020

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
DOCTYPE html>
<html>
<head>
<phong cách>
#div1
width:50%;
border: 1px solid;
padding: 10px;
box-shadow: 10px 10px 10px blue inset;
style>
head>
<body>
<h1>Ví dụ tạo bóng <a href="https://www.dammio.com">dammio.coma>h1>
<h2>box-shadow: 10px 10px 10px blue inset: --- dammio.comh2>
<div id="div1">
<p>Tạo bóng bên trong bằng tham số inset.p>
div>
body>
html>

Tạo bóng cầu vồng tròn

Trong gợi ý này, bạn sẽ học phương pháp tạo bóng cầu vòng với nhiều màu sắc. gợi ý sử dụng border-radius: 50% để tạo ảnh tròn cho vùng giao diện.
Hướng dẫn các cách box-shadow trong css mới nhất 2020

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
DOCTYPE html>
<html>
<head>
<phong cách>
div
width: 50%;
margin: 30px auto;
text-align: center;
.rainbow
display: block;
padding: 100px;
margin-top: 100px;
border-radius: 50%;
box-shadow:
0 0 0 10px violet,
0 0 0 20px indigo,
0 0 0 30px blue,
0 0 0 40px green,
0 0 0 50px yellow,
0 0 0 60px orange,
0 0 0 70px red;
width: 0;
phong cách>
head>
<body>
<h1>Ví dụ tạo bóng cầu vòng --- dammio.coma>h1>
<div>
<a class="rainbow">a>
div>
body>
html>

tuy nhiên, thuộc tính box-shadow còn được vận dụng để tạo viền cho pic, album, và các đối tượng không giống để làm giao diện website trực quan. Chúc các bạn thành công nhé!

Nguồn: internet.com

Tags: box shadow beautifulbox shadow codepenbox shadow cssbox shadow css examplebox shadow đẹpbox shadow trong css w3schoolsbox-shadow bottombox-shadow trong csstext-shadow trong css
ATPMedia

ATPMedia

Bài Viết Tiếp Theo
Cách Xóa Database Trong Phpmyadmin

Hướng dẫn cách xóa database trong phpmyadmin mới nhất 2020

Cách Thiết Kế Web

​Xây dựng website đơn giản, tối ưu chi phí, chuẩn SEO và đồng thời cũng cung cấp các kiến thức hữu ích để bất kỳ ai cũng có thể thiết kế website đơn giản.​

Chuyên mục

  • Xây Dựng Website
  • Bảo Mật Website
  • Dịch Vụ Chăm Sóc Website
  • Source Web
  • Tài Liệu Làm Web
  • Khai báo sitemap

Phần mềm - Công cụ

  • Brands
  • Alosoft
  • Seeding
  • Top Việc
  • Tổng Hợp
  • Quản Trị Nhân Sự

Liên kết

  • Top Vui
  • Xe Mô Tô
  • Quản Lý Kho
  • Blog Việc Làm
  • Giải Pháp Việc Làm
  • Phần Mềm Miễn Phí

© 2019 | Thiết Kế bởi ATP MEDIA

  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Xây dựng website đơn giản, tối ưu chi phí, chuẩn SEO và đồng thời cũng cung cấp các kiến thức hữu ích để bất kỳ ai cũng có thể thiết kế website đơn giản.