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

最新推荐文章于 2024-07-26 08:45:03 发布

^_^ 小小码nong

最新推荐文章于 2024-07-26 08:45:03 发布

阅读量2k

点赞数 2

分类专栏： # 1.从零开始挑战前端文章标签： box-shadow 阴影效果的实现

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78068750

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

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>