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>

效果图:


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

探索 CSS3 中的 box-shadow 属性

原文链接:http://web.jobbole.com/87938/ 挖掘你之前未曾见过的一些应用。 PS:文章末尾的 codepen 有8个不错的案例。 “box-shadow...
  • u013063153
  • u013063153
  • 2016年09月27日 10:11
  • 714

CSS3新特性box-shadow实现多重边框

css3中定义了许多的新特性,极大的丰富了css的表现力。本片博文意在探讨其中的新特性box-shadow。box-shadow语法如下box-shadow: h-shadow v-shadow bl...
  • yk19921114
  • yk19921114
  • 2016年06月09日 00:07
  • 3892

CSS3盒阴影box-shadow

本文介绍了CSS3中的盒子阴影box-shadow,包括单边实影和单边阴影、两种四边阴影、内阴影、多层阴影等!以及结合边框圆角、变形、旋转、调整层级关系等属性实现了曲边阴影和翘边阴影效果!...
  • macanfa
  • macanfa
  • 2016年06月12日 15:47
  • 1100

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

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

ios8.3 iphone6-plus box-shadow 不兼容

ios8.3 iphone6-plus   box-shadow 不兼容,要加一个border-radius
  • kongjiea
  • kongjiea
  • 2015年09月08日 17:22
  • 2134

css3阴影box-shadow使用个人笔记

基本语法:box-shadow: inset h-shadow v-shadow blur spread color; inset:可选。将外部阴影 (outset) 改为内部阴影。 h-shado...
  • liuxia666
  • liuxia666
  • 2017年08月02日 10:49
  • 226

css3 box-shadow实例 盒子阴影(翘边阴影,曲线阴影)

做完后效果如下: 上面是曲边阴影,下边是翘边阴影。曲边阴影下部是类似弧线,翘边效果四角旁边翘起阴影。 *{ margin:0; padding: 0; } ul{ list-sty...
  • Christine95
  • Christine95
  • 2015年07月14日 16:28
  • 2032

css3阴影box-shadow

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

css中box-shadow属性与text-shadow属性

box-shadow就是在原来的块下复制了一份相同大小的块,放在原来的块下面,然后相对于左上角移动,做出类似阴影的效果,然后添加阴影的宽度以及阴影扩散的半径,最后就是颜色,另外一个inset属性放在最...
  • evilemon
  • evilemon
  • 2015年07月11日 20:39
  • 822

高性能动画“box-shadow”属性

本文从《[How to animate "box-shadow" with silky smooth performance](http://tobiasahlin.com/blog/how-to-a...
  • whqet
  • whqet
  • 2015年12月13日 10:52
  • 3754
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3 的 box-shadow
举报原因:
原因补充:

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