08盒子阴影.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       h1 {
              font-size: 90px;
              text-shadow: 10px 3px 3px rgba(0,0,0,0.5);
              color: red;
       }

       div {
              width: 200px;
              height: 200px;
              border: 10px solid red;
              /* 水平位置 垂直位置  模糊距离 阴影颜色*/
              box-shadow: 10px 15px 30px rgba(0,0,0,0.4) inset;
       }
    </style>
</head>
<body>
    <h1>我们一定可以高薪</h1>
    <div></div>
</body>
</html>

09水晶图片.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 249px;
            height: 249px;
            line-height: 249px;    
            text-align: center;
            border-radius: 50%;
            margin: 100px;
            background-color: pink;
            background: url(shui.jpg) 0 0 no-repeat;
            font-size: 30px;
            color: rgba(255,255,255,0.7);
            box-shadow: 5px 5px 10px 16px rgba(255,255,255,0.4) inset, 5px 4px 10px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div>水晶图片</div>
</body>
</html>

 

posted on 2019-06-20 22:04  HiJackykun  阅读(89)  评论(0编辑  收藏  举报