黑影大概从CSS2就刚开始有了，可是仅有Safari1个访问器适用它，到如今仍然是这样。黑影在CSS3中能够运用在边框和文本上，就像照片的黑影实际效果1样.
黑影大概从CSS2就刚开始有了，可是仅有Safari1个访问器适用它，到如今仍然是这样。黑影在CSS3中能够运用在边框和文本上，就像照片的黑影实际效果1样。
上1篇详细介绍了：CSS3实例教程(3):border-color网页页面边框颜色
1般能够分成box-shadow和textshadow两类。
CSS3的box-shadow和textshadow能够写做：box-shadow:Apx Bpx Cpx #xxx;
Apx = x轴
Bpx = y轴
Cpx = 投射长度
#XXX = 像一般1样的色调
掌握了这些，大家便可以下列面的方式刚开始体验了…
访问器适配性：
在前面的详细介绍中，大家早已申明，其实不是全部的访问器都适用CSS3.最好是的适用CSS3黑影实际效果的访问器是Safari，也便是说，大家如今只必须用刀-webkit前缀。
#boxShadow{
border: 5px solid #111;
-webkit-box-shadow: 5px 5px 7px #999;
-webkit-border-bottom-right-radius: 15px;
padding: 15px 25px;
height: inherit;
width: 590px;
}
这类实际效果一样能够用于照片…
访问器适用：
- FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 适配]
- Google Chrome (1.0.154.)
- Google Chrome (2.0.156.)(适用并不是太好)
- Internet Explorer (IE7/ IE8 RC1)
- Opera (9.6)
- Safari (3.2.1, Windows)
简易文本黑影：
.textShadowSingle {
font-size: 3.2em;
color: #F5F5F5;
text-shadow: 3px 3px 7px #111;
text-align: center;
}
访问器适用：
- FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 适配]
- Google Chrome (1.0.154.)
- Google Chrome (2.0.156.)(适用并不是太好)
- Internet Explorer (IE7/ IE8 RC1)
- Opera (9.6)
- Safari (3.2.1, Windows)
多种文本黑影
.textShadowMultiple {
font-size: 3.2em;
color: #FFF;
text-shadow: 0px ⑴1px 10px #C60, 0px ⑶px 9px #FF0;
text-align: center;
padding: 10px 0px 5px 0px;
background: #151515;
}
访问器适用
- FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 适配]
- Google Chrome (1.0.154.)
- Google Chrome (2.0.156.)(适用并不是太好)
- Internet Explorer (IE7/ IE8 RC1)
- Opera (9.6)
- Safari (3.2.1, Windows)
