实现八卦

phpwsl  发布于 2018-08-22 16:12:44    74

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4.    <meta charset="UTF-8">

  5.    <title>CSS3——阴影</title>

  6.    <style>

  7.        #box{

  8.            width:150px;

  9.            height:100px;

  10.            background:red;

  11.            margin-top:100px;

  12.            margin-left:400px;

  13.            /*设置盒子的阴影*/

  14.            /*box-shadow:水平阴影 垂直阴影 [模糊度] [外延值] [颜色] [inset往里面收]*/

  15.            box-shadow:0px 0px 25px 10px blue inset;

  16.        }

  17.        p{

  18.            font-size:80px;

  19.            /*设置文本的阴影*/

  20.            /*text-shadow:水平阴影 垂直阴影 [模糊度] [颜色]*/

  21.            text-shadow:6px 6px 10px black;

  22.            /*兼容性写法*/

  23.            -webkit-text-stroke:1px yellow;

  24.        }

  25.    </style>

  26. </head>

  27. <body>

  28.    <div id="box"></div>

  29.    <p>再也不远见你在深夜里排队</p>

  30. </body>

  31. </html>