关于CSS中box-shadow的简单使用

html-css014

关于CSS中box-shadow的简单使用,第1张

box-shadow就是给盒子、文本的阴影,就像人的影子一样。根据调整其属性进行控制阴影出现的位置,大小,颜色。

box-shadow属性添加一个或者多个阴影。

语法:

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

    <style>

    div {

        width: 300px

        height: 300px

        position: absolute

    }

    .f {

        opacity: 0.6

        filter: alpha(opacity=60)

        text-align: center

        background-color: gray

        left: 0

        top: 0

        z-index: 99

    }

    input {

        position: absolute

        top: 100px

        left: 60px

        z-index: 100

    }

    

    .b {

        background-color: red

        top: 100px

        left: 100px

    }

    </style>

</head>

<body>

    <div>

        <div class="f"></div>

        <input type="text">

    </div>

    <div class="b"></div>

</body>

</html>至于后面图片的那个影子,那应该是图片的,不是css写出来的