当前位置:天才代写 > tutorial > 网页教程 > 一行CSS3代码为文字和块状元素添加阴影

一行CSS3代码为文字和块状元素添加阴影

2018-05-18 08:00 星期五 所属: 网页教程 浏览:367

       阴影是web设计师为页面增加层次感的常用手法。尽管在css3诞生之前,微软推出了投影滤镜,但IE以外的其它浏览器都不愿意与微软为伍,打死不支持投影,所以设计师仍然需要用在photoshop中把带阴影效果的图片制作好然后给网页使用。

  这就意味着图片必须使用支持透明通道的png格式,导致图像文件变大不少,所以对于直线形状的阴影,有的设计师会切出一小块阴影然后在页面上通过重复填充进行延伸,其过程可不是一般的麻烦。

  作为w3c成员之一的CSS3,其内置的阴影必然能得到各大浏览器厂商的认可。世界和平统一了,设计师们终于解放了,他们不用再为网页的阴影效果而烦恼。

  我们知道,一个元素,哪怕不是块级的(比如p元素),它自身也都有一个矩形的背景。那么问题来了,我是给背景做阴影还是文字呢?CSS3考虑得很周到,它分别为这两个部分定义了box-shadow和text-shadow属性。

  我们先来构建一段用于测试的html代码

一行CSS3代码为文字和块状元素添加阴影_CSS3代码_块状元素_Web阴影_课课家

  运行效果如下图所示,页面显示一个背景为浅灰色的div块

基础代码运行效果

  现在我们先来测试box-shadow属性。跟前面发的圆角一样,这个属性也要用不同的前缀兼容不同的浏览器,目的吧,不就是厂商想让大家记住它们的名字喽。

设置box-shadow属性代码

  以其中一行为例

其中一行代码

  4个参数,用英文空格分开,分别代表x方向上的偏移,y方向上的偏移,阴影大小和阴影颜色。

  所以这段代码实现了一个x方向上偏移5像素,y方向上偏移10像素,大小为25像素的灰色阴影。

  效果如下图所示

设置box-shadow属性代码效果图

  现在我们来测试text-shadow,写法跟box-shadow基本一致。

设置text-shadow属性代码

  再次运行,文本下方显示出一个红色的阴影。

       效果如下图所示

设置text-shadow属性代码运行效果

  国家打仗,遭殃的是老百姓;浏览器厂商不和,受苦的是Web设计师。只有和平共处才是促进社会进步的最大动力。希望在以后的日子里,各大浏览器厂商能够不计前嫌,共同遵守Web标准,让Web制作变得简单,让网页产量大幅提升,为天下网民共同开创高效、快速的网络新时代。

 

    关键字:

天才代写-代写联系方式