6：边框-1.1.2边框阴影

来源：互联网发布：美国海关数据库编辑：程序博客网时间：2024/05/21 00:00

1.1.1 边框阴影

box-shadow

与文字阴影类似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）。

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

如box-shadow: 5px 5px 5px #CCC

1、水平偏移量正值向右负值向左；

2、垂直偏移量正值向下负值向上；

3、模糊度是不能为负值；

4、inset可以设置内阴影；

注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感，实际开发中可以大胆使用。

/* 外阴影*/

.outset {

width: 100px;

height: 100px;

/* x 偏移量 y偏移量阴影模糊半径阴影扩展半径阴影颜色*/

box-shadow: 10px2px 20px;

}

/* 内阴影*/

.inset {

width: 100px;

height: 100px;

/* x 偏移量 y偏移量阴影模糊半径阴影扩展半径阴影颜色*/

box-shadow: 10px2px 20px inset;

}

/* 阴影x为负数*/

.negative1 {

width: 100px;

height: 100px;

box-shadow: -10px2px 6px red;

}

/* 阴影y为负数*/

.negative2 {

width: 100px;

height: 100px;

box-shadow: 4px-10px 6px red;

}

/* 多阴影*/

.multi {

width: 100px;

height: 100px;

/*如果需要添加多个阴影只需要用逗号隔开*/

box-shadow: 4px2px 20px red, -4px -2px 6px green, 0px 0px 12px 5px blue inset;

}

*******相应代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .outset {            width: 200px;            height: 100px;            background: pink;            box-shadow: 5px 5px 10px red;        }                .inset {            width: 200px;            height: 100px;            background: pink;            box-shadow: 5px 5px 10px red inset;        }                .negative1 {            width: 200px;            height: 100px;            background: pink;            box-shadow: -10px 5px 20px red inset;        }                .negative2 {            width: 200px;            height: 100px;            background: pink;            box-shadow: 5px -10px 20px red;        }                .multi {            width: 100px;            height: 100px;            /*如果需要添加多个阴影只需要用逗号隔开*/            box-shadow: 4px 2px 20px red, -4px -2px 6px green, 12px 5px blue inset;        }    </style></head><body>    <h2>外阴影</h2>    <div class="outset"></div>    <h2>内阴影</h2>    <div class="inset"></div>    <h2>阴影x为负数</h2>    <div class="negative1"></div>    <h2>阴影y为负数</h2>    <div class="negative2"></div>    <h2>多阴影</h2>    <div class="multi"></div></body></html>

相关效果

阅读全文

0 0