CSS3系列教程:阴影

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

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

【 tulaoshi.com - Web开发 】

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

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

简单文字阴影:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

text-shadow

123456
.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

延伸阅读
标签: Web开发
说起CSS3的新特性,就不得不提到 Media Queries 。 本文比较详细,所以很多实际中用不到。所以如果只是想简单了解Media Queries,推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分,包括类型、组别和规则等。CSS并非为了显示器而创造,而是应用于各种各样的媒体,比如常见的显示器,越来愈多的手持设备,可能略显过...
标签: Web开发
你们中有许多人可能已经听到过有关CSS3的不少传言,但是我们现在能真正用到的CSS3技巧又有哪些呢?本文,我将向你展示一些 与众不同的CSS3技巧 ,这些技巧在一些主要的浏览器中表现良好(如Firefox,Chrome,Safari,Opera浏览器)。这些效果会在不支持的浏览器中降级渲染(如IE浏览器)。使用浏览器特定的声明,许多提议的CSS3样式都可以马...
标签: 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+ 以及一些衍生的浏览器...
  最近闲来无事,上W3C转了一圈,粗略地浏览了一下尚未发布的CSS3,虽然还未被W3C正式发布出来,但还是能从已有的资料中窥出一些端倪,一个很明显的特征,CSS3制订得越来越细致了,某些细节之处完全超乎你所能想象的到的范围。 在这里不提及CSS3的语法,因为对于目前尚未有软件支持的CSS3,任何语法的探讨都像是空中楼...
标签: Web开发
使用新的CSS3的”RGBA”声明,不仅仅让我们像通常一样设置RGB颜色,而且还可以设置其透明度。 RGBA像RGB一样设置颜色,而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。就像opacity声明一样,一个opacity值为1的元素是完全不透明的,而一个opacity为0的元素是完全透明的。 浏览器兼容性 RGBA现在在Firefox、Google Chrom...

经验教程

24

收藏

48
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部