域名注册

• 中文域名
• 英文域名
• 通用网址
• 域名解析
• 域名转入\转出

虚拟主机

• 主机购买
• 管理主机
• FTP上传
• 数据库管理
• 主机续费升级

网站建设

• 建站流程介绍
• 网站设计
• 网站改版
• 网站维护
• 网站推广

企业邮局

• 邮箱使用
• 管理邮箱
• 邮箱续费升级
• 全球邮局

网站优化

• seo优化
• seo技巧
• 收索引擎优化
• 关键词优化

网站备案

• 备案流程指南
• 修改备案
• 备案资料下载
• 备案小技巧

服务器租用

• 服务器租用
• 服务器托管

其它服务

• 400电话
• 在线客服
• 财务常见问题
• 会员常见问题

• 您现在的位置： 创新互联 >> 网站建设 >> 网站建设常见问题 >> CSS式样的阴影式样效果

CSS式样的阴影式样效果

• 作者：谭小姐 文章来源：网站制作设计部 点击数：1612 更新时间：2009-9-14
• 现在，CSS3样式已经支持阴影样式效果。目前可以使用的阴影样式一共分成两种：一种是文本内容的阴影效果，另一种是元素阴影效果。下面我们成都网站建设就来为读者介绍下这两种阴影形式。
  1.box-shadow
  CSS3的box-shadow属性是让元素具有阴影效果，其语法是：
  box-shadow:<length> <length> <length> || color;
  其中，第一个length值是阴影水平偏移值；第二个length值是阴影垂直偏移值；第三个length值是阴影模糊值。水平和垂直偏移值都可取正值，如4px或-4px。
  目前，box-shadow已经得到firefox 3.5+、chrome 2.0、safari 4+等现代浏览器的支持。
  可是，当我们在基于webkit的chrome和safari等浏览器上使用box-shadow属性时，需要将属性的名称写成-webkit-box-shadow的形式。firefox浏览器则需要写成-moz-box-shadow的形式。
  从浏览器支持的情况来看，基于android和ios的移动web浏览器也完全支持-box-shadow属性。因此，我们成都网站建设在编写CSS式样时使用box-shadow属性来修饰移动web移动应用程序的界面。
  下面代码为使用box-shadow的简单实例，该示例兼容chrome浏览器、safari浏览器及火狐浏览器：
  <style type="text/css">
  div{
  /*其他浏览器*/
  box-shadow:33px 4px 2px #000;
  /*webkit 浏览器*/
  -webkit-box-shadow:3px 4px 2px #000;
  /*firefox浏览器*、
  -moz-box-shadow:3px 4px 2px #000;
  padding:5px 4px;
  }
  </style>
  2.text-shadow
  text-shadow属性用于设置文本内容的阴影效果或模糊效果。
  目前，text-shadow属性已经得到safari浏览器、firefox浏览器、chrome浏览器和operation浏览器的支持。IE8版本以下的IE浏览器都不支持。从web浏览器支持的情况来看，成都网站制作大部分移动平台的web浏览器都能得到很好的支持。
  text-shadow的语法和box-shadow的语法基本上一致：
  text-shadow:<length> <length> <length> || color
  如下代码为使用text-shadow的简单示例：
  <style type="text/css">
  div{
  text-shadow:5px -10px 5px red;
  color:#666;
  font-size:16px;
  }
  </shyle>
  本文关于CSS式样的阴影形式效果，我们成都网站建设就为大家分析到这里，下次我们成都网页设计将为大家讲解CSS的属性对页面进行美化修饰。
  
  
• 上一篇文章：如何使用jQuery Mobile创建页面和视图
  下一篇文章：网站建设常见问题