您的位置：首页 > Web前端 > HTML5

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

2017-04-06 16:47 555 查看

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>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 经验 html5 css html

相关文章推荐

新的分享

章节导航