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

来源：互联网发布：网络信息安全的重要性编辑：程序博客网时间：2024/06/06 09:50

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>

这里写图片描述

注意上属性值的使用，具体的调试测试其实可以在控制台上面去调试，可以很清晰的看到他们的值的变化会带来的一些效果的变化

阅读全文

1 0