WonderCSS

一个简单的CSS样式让你的网站瞬间“高大上”

最近在看一些国外网站的样式时,发现一个简单有效的CSS样式,很提气!代码很简单,利用CSS伪元素和CSS3中的box-shadow,实现页面顶端的阴影效果,由于是用的body部分的伪元素,所以也无需在HTML添加多余的代码。在此记录下,推荐给大家。


body::before {
	content: "";
	position: fixed;
	top: -15px;
	left: 0;
	width: 100%;
	height: 15px;
	z-index: 10;
	-webkit-box-shadow: 0 0 8px rgba(0,0,0,.5);
	-moz-box-shadow: 0 0 8px rgba(0,0,0,.5);
	box-shadow: 0 0 8px rgba(0,0,0,.5);
}

无论怎样的网站,这个CSS效果都会让你的页面充满层次感!

By 于湛 发布于 2014.02.21 2,307 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注