CSS3 - Bóng

CSS3 hỗ trợ thêm bóng đổ vào văn bản hoặc các phần tử. Thuộc tính bóng mờ được chia như sau:

Bóng văn bản
Hộp bóng

Bóng văn bản

CSS3 hỗ trợ thêm hiệu ứng đổ bóng cho văn bản. Sau đây là ví dụ để thêm hiệu ứng đổ bóng vào văn bản:

<html>
   <head>
      <style>
         h1 {
            text-shadow: 2px 2px;
         }
         h2 {
            text-shadow: 2px 2px red;
         }
         h3 {
            text-shadow: 2px 2px 5px red;
         }
         h4 {
            color: white;
            text-shadow: 2px 2px 4px #000000;
         }
         h5 {
            text-shadow: 0 0 3px #FF0000;
         }
         h6 {
            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
         }
         p {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
         }
      </style>
   </head>

   <body>
      <h1>Tutorialspoint.com</h1>
      <h2>Tutorialspoint.com</h2>
      <h3>Tutorialspoint.com</h3>
      <h4>Tutorialspoint.com</h4>
      <h5>Tutorialspoint.com</h5>
      <h6>Tutorialspoint.com</h6>
      <p>Tutorialspoint.com</p>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

bóng hộp

Được sử dụng để thêm hiệu ứng đổ bóng cho các phần tử, Sau đây là ví dụ để thêm hiệu ứng bóng đổ cho phần tử.

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            padding: 15px;
            background-color: red;
            box-shadow: 10px 10px;
         }
      </style>
   </head>

   <body>
      <div>This is a div element with a box-shadow</div>
   </body>
</html>

Nó sẽ tạo ra kết quả sau: