HTML5基础加强css样式篇（盒子阴影属性：box-shadow）（三十六）

来源：互联网发布：淘宝店铺宝贝详情教程编辑：程序博客网时间：2024/06/05 20:37

1.box-shadow属性简介：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            /* .box 默认样式 */            margin: 200px 0 0 200px;            width: 200px;            height: 200px;            background-color: orange;            /*    box-shadow: h-shadow v-shadow blur spread color inset;    h-shadow必需。水平阴影的位置。允许负值。测试            v-shadow必需。垂直阴影的位置。允许负值。测试            blur可选。模糊距离。测试            spread可选。阴影的尺寸。测试            color可选。阴影的颜色。请参阅 CSS 颜色值。测试            inset可选。将外部阴影 (outset) 改为内部阴影。*/            box-shadow: 0 0 50px 0 blue;            box-shadow: 210px 0 0 0 blue;            box-shadow: 210px 50px 0 0 blue;            box-shadow: -50px 0 50px 0 blue,  50px 0 50px  0 green;        }        .box:hover {            /* 鼠标悬浮时样式 */        }    </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

效果图：

2.盒子形状变化对阴影影响一样：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            /* .box 默认样式 */            /*margin: 200px 0 0 200px;*/            width: 100px;            height: 100px;            background-color: red;            border-radius: 50%;            /*阴影的形状与元素一致*/            box-shadow: 110px 0 0 0 red, 220px 0 0 0 red;        }        .box:hover {            /* 鼠标悬浮时样式 */        }    </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

效果图：

3.利用内阴影制作球：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            /* .box 默认样式 */            margin: 200px 0 0 200px;            width: 200px;            height: 200px;            /*background-color: orange;*/            border-radius: 50%;            box-shadow: inset -30px -30px 100px 0 #000;        }        .box:hover {            /* 鼠标悬浮时样式 */        }    </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

效果图：

4.利用内阴影制作立体按钮：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            /* .box 默认样式 */            margin: 200px 0 0 200px;            width: 300px;            height: 120px;            background-color: #f5f5f5;            border-radius: 60px;            box-shadow: inset 0 -30px 100px 0 #000;            box-shadow: inset 0 0 30px 0 #666;        }        .box:hover {            /* 鼠标悬浮时样式 */        }    </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

效果图：

5 .阴影尺寸：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            /* .box 默认样式 */            margin: 200px 0 0 200px;            width: 200px;            height: 200px;            background-color: orange;            box-shadow: 0 110px 0 -50px blue;        }        .box:hover {            /* 鼠标悬浮时样式 */        }    </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

效果图：

6.交叉阴影效果：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        body{            background-color: #f5f5f5;        }        .box {            /* .box 默认样式 */            margin: 20px auto;            width: 600px;            height: 200px;            background-color: #fff;            position: relative;        }        .box:before{            content: "";            display: block;            height: 0px;            background-color: #fff;            position: absolute;            width: 100%;            transform: rotate(15deg);            top: 130px;            box-shadow: 0 0 20px 1px #333;            z-index: -1;        }        .box:after{            content: "";            display: block;            height: 0px;            background-color: #000;            position: absolute;            width: 100%;            transform: rotate(-15deg);            top: 130px;            box-shadow: 0 0 20px 1px #333;            z-index: -1;        }    </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

效果图：

0 0