您的位置：首页 > Web前端

从零开始前端学习[16]:box-shadow阴影属性的使用

2017-09-23 09:34 651 查看

box-shadow阴影属性的使用

box-shadow的效果及使用

提示

博主：章飞_906285288

博客地址：http://blog.csdn.net/qq_29924041

box-shadow的效果及使用

box-shadow也叫做盒子的阴影，主要是针对块级元素来说的，给盒子增加类似3d的阴影效果

使用如下:
box-shadow:h-shadow  v-shadow blur spread color( outset/inset)
h-shadow:水平方向上的偏移量(向右为正，左为负)
v-shadow:垂直方向上的偏移量(向下为正，向上为负)
blur:模糊半径(可选)
spread:阴影的大小(可选)
color:阴影的颜色(可选)
outset外部阴影(默认)/inset内部阴影


box-shadow在我们css的效果使用中相对是比较频繁的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;box-shadow: 0px 0px 10px 5px deeppink ;margin: 50px auto}

</style>
</head>
<body>
<div class="main">
<p>box-shadow的效果</p>
</div>
</body>
</html>




注意上属性值的使用，具体的调试测试其实可以在控制台上面去调试，可以很清晰的看到他们的值的变化会带来的一些效果的变化
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  box-shadow 阴影效果的实现
相关文章推荐
新的分享
章节导航