冰剑'blog

用css3创建的3d效果的“带子” ，其实我也不知道该怎么称呼它。

看一下效果吧

主要用到了css3的阴影、圆角以及css实现的三角形的等效果

关于css3以及css实现三角形的文章：

• [[整理]css3的一些新特性]
• [em实现倒三角的提示效果]
• [CSS3属性选择符及其伪类]

.box {
			width:600px;
			height:350px;
			margin:0 auto;
			padding:30px;
			border:1px solid #666;
		}
	.innerbox {
			width:260px;
			height:280px;
			color:#333;
			background:#ccc;
			margin:0 auto;
			padding:50px 10px 0;
			border:1px solid #333;
			border-radius:10px;/*opera 、IE9*/
			-moz-border-radius:10px;/*Firefox*/
			-webkit-border-radius:10px;/*Safari、Chrome*/
			border-radius:10px;
			box-shadow:2px 2px 8px #666,-2px -2px 8px #666;/*opera 、IE9*/
			-moz-box-shadow:2px 2px 8px #666,-2px -2px 8px #666;/*Firefox*/
			-webkit-box-shadow:2px 2px 8px #666,-2px -2px 8px #666;/*Safari、Chrome*/
			position:relative;
			}
	.innerbox p{text-indent:2em;line-height:2;font-size:14px;}
	h2 {
		width:302px;
		height:30px;
		line-height:30px;
		background:#fff;
		text-align:center;
		color:#333;
		position:absolute;
		left:-12px;
		top:10px;
		border:1px solid #333;
		box-shadow:2px 2px 8px #333;/*opera 、IE9*/
		-moz-box-shadow:2px 2px 8px #333;/*Firefox*/
		-webkit-box-shadow:2px 2px 8px #333;/*Safari、Chrome*/
		text-shadow:2px 2px 5px #CCC;
		border-radius:5px 5px 0 0;/*opera 、IE9*/
		-moz-border-radius:5px 5px 0 0;/*Firefox*/
		-webkit-border-radius:5px 5px 0 0;/*Safari、Chrome*/
	}
	em {position:absolute;top:42px;width:0;height:0;overflow:hidden;font-size:0;border:5px solid;}/*实现三角形*/
	em.s1{left:-11px;border-color: #333  #333 transparent transparent;}/*实现左三角形*/
	em.s2{right:-11px;border-color: #333  transparent transparent #333;}/*实现右三角形*/

<div class="box">
	<div class="innerbox">
		<h2>css3创建的3d</h2>
		<em class="s1">左阴影</em>
		<em class="s2">右阴影</em>
		<p>这里是用css3创建的3d绶带，暂且这么叫它吧！</p>
		<p>这里是用css3创建的3d绶带，暂且这么叫它吧！</p>
	</div>
</div>