2、阴影

来源：互联网发布：mac怎么输入省略号编辑：程序博客网时间：2024/06/05 20:12

1.盒子阴影

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>盒子阴影</title><style>#div1{margin:100px;width:200px;height:200px;background:#ccc;            /*x轴偏移 y轴偏移 blur模糊度 拓展半径 color*/    box-shadow: 10px   20px   10px        100px   red;}</style></head><body>    <div id="div1"></div></body></html>

2.盒子内阴影

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>盒子阴影多个</title><style>#div1{margin:100px;width:200px;height:200px;background:#ccc;    border:10px dashed #000;    box-shadow:                 inset 10px 0 red,                inset 0 10px green,                inset -10px 0 yellow,                inset 0 -10px blue,                20px 0 yellow,                0 20px blue,                -20px 0 green,                0 -20px pink;}</style></head><body>    <div id="div1"></div></body></html>

3.盒子阴影多个_1

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>盒子阴影多个</title><style>#div1{margin:100px;width:200px;height:200px;background:#ccc;    box-shadow:                 10px 0 red,                0 10px green,                -10px 0 yellow,                0 -10px blue,                20px 0 yellow,                0 20px blue,                -20px 0 green,                0 -20px pink;    border-radius:50%;}</style></head><body>    <div id="div1"></div></body></html>

4.盒子阴影多个_2

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>盒子阴影多个</title><style>#div1{margin:100px;width:200px;height:200px;background:#ccc;    box-shadow:                 10px 0 red,                0 10px green,                -10px 0 yellow,                0 -10px blue,                20px 0 yellow,                0 20px blue,                -20px 0 green,                0 -20px pink;}</style></head><body>    <div id="div1"></div></body></html>

5.文字阴影

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title><style>span{border:1px solid red;font-size: 30px;            /*x轴偏移 y轴偏移 blur模糊度 颜色*/    text-shadow: 1px 2px 2px 100px red;}</style></head><body><span>徐玉朋</span></body></html>

6.文字阴影多个

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title><style>span{position:absolute;left:300px;top:300px;border:1px solid red;    font-size: 30px;    text-shadow:     200px 0 red,    0 200px pink,    -200px 0 yellow,    0 -200px green;}</style></head><body>    <span>徐玉朋</span></body></html>

阅读全文

0 0