文字shadow、边框radius、边框shadow

最新推荐文章于 2024-04-18 15:03:51 发布

Huangruxia

最新推荐文章于 2024-04-18 15:03:51 发布

阅读量668

点赞数 1

分类专栏： css3 文章标签： shadow radius

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

http://www.cnblogs.com/softlover/archive/2012/11/21/2779873.html

http://www.cnblogs.com/lianjun/archive/2011/03/14/1983465.html

<!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" />
<title>无标题文档</title>
</head>
<style>
div{ float:left; margin-left:20px;}
/***内阴影效果（偏移值都为正）：**/
#box-shadow{
	-moz-box-shadow:5px 5px 5px #f00 inset;               /* For Firefox3.6+ */
	-webkit-box-shadow:5px 5px 5px#f00 inset;            /* For Chrome5+, Safari5+ */
	box-shadow:10px 10px 10px #f00 inset;                    /* For Latest Opera */
	width:200px; height:180px; background:#F90; padding-top:20px;
	}

/***内阴影效果（偏移值都为负）：***/
#box-shadow2{
	-moz-box-shadow:-5px -5px 5px #999 inset;             /* For Firefox3.6+ */
	-webkit-box-shadow:-5px -5px 5px #999 inset;          /* For Chrome5+, Safari5+ */
	box-shadow:-5px -5px 5px #999 inset;                  /* For Latest Opera */
	width:200px; height:200px; background:red;}

/****内阴影效果（水平偏移为负，垂直偏移为负）：***/
#box-shadow3{
	-moz-box-shadow:-5px 5px 5px #999 inset;              /* For Firefox3.6+ */
	-webkit-box-shadow:-5px 5px 5px #999 inset;           /* For Chrome5+, Safari5+ */
	box-shadow:-5px 5px 5px #999 inset;                   /* For Latest Opera */
	width:200px; height:180px; background:#0C0; color:#F30; font-size:40px; font-weight:900;
	-moz-text-shadow:1px 2px 2px #000;
	-webkit-text-shadow:1px 2px 2px #000;           /* For Chrome5+, Safari5+ */
	text-shadow:1px 2px 2px #000; padding-top:20px;}

/***内阴影效果（水平偏移为正，垂直偏移为负）：***/
#box-shadow4{
	-moz-box-shadow:5px -5px 5px #DDD inset;              /* For Firefox3.6+ */
	-webkit-box-shadow:5px -5px 5px #DDD inset;           /* For Chrome5+, Safari5+ */
	box-shadow:5px -5px 5px #DDD inset;                   /* For Latest Opera */
	width:200px; height:200px; background:#3CF;
	-moz-border-radius:5px; -ms-border-radius:5px; -o-border-radius:5px; border-radius:15px;}


</style>

<body>
<div id="box-shadow">我的阴影left top</div>
<div id="box-shadow2"></div>
<div id="box-shadow3">我在这儿。</div>
<div id="box-shadow4"></div>
</body>
</html>

自己的，很丑的效果图。

Huangruxia

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字shadow、边框radius、边框shadow

http://www.cnblogs.com/softlover/archive/2012/11/21/2779873.html http://www.cnblogs.com/lianjun/archive/2011/03/14/1983465.html
复制链接

扫一扫

专栏目录