CODEHTML

前端技术分享交流,一直在前端路上的蜗牛

CSS3之box-shadow基础详解

前言

box-shadow: h-shadow v-shadow blur spread color inset;

参数值 描述
h-shadow (X轴偏移量) 必需。水平阴影的位置。允许负值。
v-shadow (Y轴偏移量) 必需。垂直阴影的位置。允许负值。
blur (阴影模糊半径) 可选。模糊距离。
spread (阴影扩展半径) 可选。阴影的尺寸。
color (阴影颜色) 可选。阴影的颜色。请参阅 CSS 颜色值。
inset (投影方式) 可选。将外部阴影 (outset) 改为内部阴影。

文档来自=>W3Cschool

Step – 实例讲解

Step-1:

box-shadow: 0 0 5px #ccc;// x,y偏移量为0  5px的模糊半径

image.png

Step-2:

# 改变X轴偏移量
box-shadow: 5px 0 5px #ccc;// 水平偏移5px

image.png

Step-3:

# 改变Y轴偏移量
box-shadow: 0 5px 5px #ccc;// 垂直偏移5px

image.png

Step-4:

# 改变X、Y轴偏移量
box-shadow: 3px 5px 5px #ccc;

image.png

Step-5:

# 改变X、Y轴偏移量,可以为负值
box-shadow: -3px -5px 5px #ccc;
box-shadow: -3px 5px 5px #ccc;
box-shadow: 3px -5px 5px #ccc;

image.png

Step-6:

# 设置inset
box-shadow: -3px -5px 5px #ccc inset;
box-shadow: -3px 5px 5px #ccc inset;
box-shadow: 3px -5px 5px #ccc inset;

image.png

Step-7:
**注意:box-shadow 向框添加一个或多个阴影。
该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。**

box-shadow:-3px -5px 5px blue inset,3px 5px 5px red,3px 5px 5px green inset,-3px -5px 5px black;

image.png

Step-8:

#Demo的实例

#html
<div class="main">
      <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
#css
body,html{background: #fafafb;}
 *{padding: 0;margin: 0;}
ul li{list-style: none;}
.main{padding: 100px 0}
.main ul{
       width: 1200px;
       margin: 0 auto;
}
.main ul li {
       width: 360px;background: #fff;height: 360px;line-height:360px;display: block;float: left;margin-bottom: 60px;text-align: center;font-size: 100px;
       color: #ccc;
       border-radius: 5px;
       -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      transition: all .4s;
      -webkit-transition: all .4s;
      -moz-transition: all .4s;
}
.main ul li:nth-child(3n+2){
      margin-left:60px;margin-right:60px;
}

.main ul li:hover{
      box-shadow: 1px 4px 10px 2px #ccc;
      -webkit-box-shadow: 1px 4px 10px 2px #ccc;
      -moz-box-shadow: 1px 4px 10px 2px #ccc;
      transform: translateY(-2%);
}

Demo地址
在线操作

原文blog:http://codehtml.cn

阅读更多
版权声明: https://blog.csdn.net/nyflxp/article/details/79474991
文章标签: 前端 css css3
个人分类: Css Css3
想对作者说点什么? 我来说一句

qt模拟CSS3box-shadow效果

2015年07月14日 776KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭