css3 的 box-shadow

原创 2013年12月02日 15:46:02
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
	div{
		background-color:#F00;
		width:200px;
		height:200px;
		box-shadow:10px 20px 30px #00F;	
		-moz-box-shadow:10px 20px 30px #00F;	
	}
</style>
<title>无标题文档</title>
</head>
<body>
<div></div>
</body>
</html>

效果图:


版权声明:原创文章,请标明出处~~~

相关文章推荐

IE下兼容CSS3属性(或IE兼容box-shadow)方法

本文主要讲述IE下兼容CSS3属性的方法,问题来源于我想要在IE下用box-shadow这个属性做阴影,所以会主要围绕box-shadow来讲。 第一种:如果我们想要在IE下兼容CSS3的属性可以使...

CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inse...

CSS3属性box-shadow使用教程

CSS3的box-shadow属性可以让我们轻松实现图层阴影效果。我们来实战详解一下这个属性。 1. box-shadow属性的浏览器兼容性 先来看一个这个属性的浏览器兼容性: ...
  • kaosini
  • kaosini
  • 2012年07月25日 10:11
  • 449

css3的box-shadow的使用

css3的box-shadow的使用

css3阴影box-shadow

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[in...

CSS3 box-shadow

转载自:http://www.w3cplus.com/content/css3-box-shadow 上一节我们一起探讨了一下CSS3的文字阴影text-shadow的使用方法,今天我们接着...

HTML5与CSS3之box-shadow--阴影外阴影与外发光

外阴影:box-shadow:X Y Npx #color; 内阴影:box-shadow:inset X Y Npx #color; 第一个属性:阴影的X轴(可以使用负值) 第二个属性:阴影的...

css3 边框阴影 box-shadow

box-shadow是向盒子添加阴影。支持添加一个或者多个。 很简单的一段代码,就实现了投影效果,酷毙了。我们来看下语法: box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径]...

CSS3 berder-radius圆角矩形,box-shadow投影,各浏览器测试

css3圆角 投影测试 .test{border-radius:5px;box-shadow:5px 5px 10px; background:#999; width:480px; height:2...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3 的 box-shadow
举报原因:
原因补充:

(最多只允许输入30个字)