Cách tạo một cái bóng cho phần tử HTML -15

Tạo một “cái bóng” cho phần tử bên dưới.

– Thông thường thì mỗi phần tử HTML luôn có một “cái bóng” nằm ở ngay sau lưng với kích thước bằng kích thước của nó, nếu muốn thấy được cái bóng thì chúng ta cần phải “nhích” cái bóng ra khỏi vị trí ban đầu, và để làm được điều đó thì chúng ta sử dụng thuộc tính box-shadow với cú pháp như sau: box-shadow: value;

– Trong đó, value có thể được xác định dựa theo một trong bảy loại giá trị:

none: Không thiết lập cái bóng cho phần tử.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            width:300px;
            height:200px;
            background-color:#73ad21;
            box-shadow:none;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

x y:

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            margin:50px;
            width:300px;
            height:200px;
            background-color:#73ad21;
            box-shadow:0px 0px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

x y color:

Tham số x dùng để chỉ định khoảng cách mà cái bóng được nhích ra khỏi vị trí ban đầu (xét theo chiều ngang)
Tham số y dùng để chỉ định khoảng cách mà cái bóng được nhích ra khỏi vị trí ban đầu (xét theo chiều dọc)

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            margin:50px;
            width:300px;
            height:200px;
            background-color:#73ad21;
            box-shadow:4px 4px red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

x y shadow color: Tham số shadow dùng để chỉ định mức độ nhòe của cái bóng, giá trị càng lớn thì cái bóng sẽ càng nhòe.

<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            margin:50px;
            width:300px;
            height:200px;
            background-color:#73ad21;
            box-shadow:4px 4px 16px black;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

x y shadow size color: Tham số size dùng để chỉ định việc tăng hay giảm kích thước của cái bóng.

Nếu giá trị dương, kích thước cái bóng sẽ tăng lên.
Nếu giá trị âm, kích thước cái bóng sẽ giảm xuống.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            margin:50px;
            width:300px;
            height:200px;
            background-color:#73ad21;
            box-shadow:0px 0px 20px 0px black;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

initial: Sử dụng giá trị mặc định của nó (mặc định thì thuộc tính box-shadow có giá trị là none).

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            width:300px;
            height:200px;
            background-color:#73ad21;
            box-shadow:initial;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

inherit: Kế thừa giá trị thuộc tính box-shadow từ phần tử cha của nó

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        body{
            padding:15px;
            box-shadow:5px 5px 7px red;
        }
        div{
            width:300px;
            height:200px;
            background-color:#73ad21;
            box-shadow:inherit;
        }
    </style>
</head>
<body>
    <div></div>
    <p>- Thuộc tính box-shadow của phần tử <u>&lt;div&gt;</u> có giá trị là <u>inherit</u></p>
    <p>&#8680; Nó sẽ kế thừa giá trị thuộc tính box-shadow từ phần tử cha của nó là <u>&lt;body&gt;</u></p>
    <p>&#8680; Cho nên giá trị thật sự của nó sẽ tương ứng với <u>5px 5px 7px red</u></p>
</body>
</html>

– Lưu ý: Nếu các bạn muốn tạo nhiều “cái bóng” cho cùng một phần tử HTML thì các bạn cần phải thêm một dấu phẩy nằm ngăn cách giữa mỗi hai bộ giá trị.

Ví dụ:

– Phần tử <div> được thiết lập hai cái bóng.

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
            margin:65px;
            width:300px;
            height:200px;
            background-color:#73ad21;
            box-shadow:20px 20px 10px gray, -30px -30px 10px blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>