CSS3系列教程:阴影

2016-02-19 18:18 5 1 收藏

今天天气好晴朗处处好风光，好天气好开始，图老师又来和大家分享啦。下面给大家推荐CSS3系列教程:阴影，希望大家看完后也有个好心情，快快行动吧！

【 tulaoshi.com - Web开发】

阴影大约从CSS2就开始有了，但是只有Safari一个浏览器支持它，到现在依然是这样。阴影在CSS3中可以应用在边框和文字上，就像图片的阴影效果一样。

一般可以分为box-shadow和textshadow两类。

CSS3的box-shadow和textshadow可以写做：box-shadow:Apx Bpx Cpx #xxx;
Apx = x轴
Bpx = y轴
Cpx = 投影长度
#XXX = 像通常一样的颜色

了解了这些，我们就可以以下面的方法开始体验了

浏览器兼容性：

在前面的介绍中，我们已经声明，并不是所有的浏览器都支持CSS3.最好的支持CSS3阴影效果的浏览器是Safari，也就是说，我们现在只需要用刀-webkit前缀。

box-shadow

12345678

#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;}

这种效果同样可以用于图片

简单文字阴影：

text-shadow

.textShadowSingle {  font-size: 3.2em;  color: #F5F5F5;  text-shadow: 3px 3px 7px #111;  text-align: center;}

多重文字阴影

multi-text-shadow

12345678

.textShadowMultiple {  font-size: 3.2em;  color: #FFF;  text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;  text-align: center;  padding: 10px 0px 5px 0px;  background: #151515;}

来源:http://www.tulaoshi.com/n/20160219/1617229.html

上一篇：关于HTML5在移动设备上的支持情况
下一篇：防SQL注入：生成参数化的通用分页查询语句

看过《CSS3系列教程:阴影》的人还看了以下文章更多>>

css教程：CSS3 Media Queries 详解

标签： Web开发

说起CSS3的新特性，就不得不提到 Media Queries 。本文比较详细，所以很多实际中用不到。所以如果只是想简单了解Media Queries，推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分，包括类型、组别和规则等。CSS并非为了显示器而创造，而是应用于各种各样的媒体，比如常见的显示器，越来愈多的手持设备，可能略显过...

CSS教程:与众不同的CSS3技巧

标签： Web开发

你们中有许多人可能已经听到过有关CSS3的不少传言，但是我们现在能真正用到的CSS3技巧又有哪些呢？本文，我将向你展示一些与众不同的CSS3技巧，这些技巧在一些主要的浏览器中表现良好（如Firefox，Chrome，Safari，Opera浏览器）。这些效果会在不支持的浏览器中降级渲染（如IE浏览器）。使用浏览器特定的声明，许多提议的CSS3样式都可以马...

CSS3教程:在CSS中使用的颜色

标签： Web开发

译自：Playing Around with CSS3 Colors 中文：玩转CSS3色彩传统来说，大家在CSS中使用的颜色要么是16进制格式，要么是rgb格式，就像rgb(171,205,239)。 CSS3 带来了一些新的处理颜色的方法，比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是，现在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的浏览器...

初步了解CSS3

标签： Html CSS布局 Div+CSS XHTML

最近闲来无事，上W3C转了一圈，粗略地浏览了一下尚未发布的CSS3，虽然还未被W3C正式发布出来，但还是能从已有的资料中窥出一些端倪，一个很明显的特征，CSS3制订得越来越细致了，某些细节之处完全超乎你所能想象的到的范围。在这里不提及CSS3的语法，因为对于目前尚未有软件支持的CSS3，任何语法的探讨都像是空中楼...

CSS3教程(9):设置RGB颜色

标签： Web开发

使用新的CSS3的”RGBA”声明，不仅仅让我们像通常一样设置RGB颜色，而且还可以设置其透明度。 RGBA像RGB一样设置颜色，而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。就像opacity声明一样，一个opacity值为1的元素是完全不透明的，而一个opacity为0的元素是完全透明的。浏览器兼容性 RGBA现在在Firefox、Google Chrom...

查看更多精彩>>