CSS3 背景

CSS3包含了几个新增的背景属性，使我们能更有效地控制元素的背景：

  • background-size
  • background-origin
  • background-clip

浏览器兼容

Property Chrome IE Firefox Safari Opera
background-image 4.0+ 9.0+ 3.6+ 3.1+ 11.5+
background-size 4.0+ 9.0+ 4.0+ 4.1+ 10.5+
background-origin 1.0+ 9.0+ 4.0+ 3.0+ 10.5+
background-clip 4.0+ 9.0+ 4.0+ 3.0+ 10.5+
前端CSS3

阅读全文 >>

学习创建CSS盒子阴影效果

Learn How To Create Different CSS Box Shadow Effects

CSS 盒子阴影

box-shadow 属性允许我们通过指定颜色、大小、模糊和偏移等值很简单地在盒元素上创建多个阴影效果。

box-shadow 属性可以接受2-6个属性，必须的选项有水平和垂直方向上的偏移，可选选项有延伸距离和颜色。

1
box-shadow: inset horizontal vertical blur spread colour;

示例

1
2
3
4
box-shadow: 10px 10px;
box-shadow: 10px 10px 5px #888;
box-shadow: inset 2px 2px 2px 2px black;
box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;

浏览器支持

所有主流浏览器的最新版都已经支持了 box-shadow 属性。

  • Internet Explorer 9.0 and higher
  • Firefox 3.5 and higher
  • Chrome 1 and higher
  • Safari 3 and higher
  • Opera 10.5 and higher

示例效果

以下例子共同的代码

1
2
3
<div class="box effect1">
    <h3>阴影效果一</h3>
</div>
1
2
3
4
5
6
7
8
9
10
11
.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

CSS 阴影效果一

这会创建一个标准的盒子阴影效果，阴影移到元素下来创建一个看似升起的盒子。

1
2
3
4
5
6
/*==================================================
 * Effect 1
 * ===============================================*/
.effect1{
     box-shadow: 0 10px 6px -6px #777;
}

CSS 阴影效果二

本效果会将阴影添加到盒子元素的右下角和右下角，用以创造一个盒子两个底部角翘起的视觉效果；该效果使用了:before和:after伪元素来创建新的元素放在盒子的两个角上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*==================================================
 * Effect 2
 * ===============================================*/
.effect2 {
  position: relative;
}
.effect2:before, .effect2:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.effect2:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

CSS 阴影效果三

前端CSS
|