字号: - o +

box-shadow实现阴影按钮

2013-03-04 前端开发 4人评论 26,236次浏览   

子曰:学如驾车登山,不进就退;学如逆水行舟,不进则退 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

用CSS的box-shadow属性实现Shaded buttons阴影按钮

<ul><li></li><li></li><li></li></ul>

需要的CSS样式:

body {
	background:#ccc;
}
ul,li {
	margin:0;
	padding:0;
	list-style:none;
}
ul {
	text-align:center;
	margin-top:100px;
}
li {
	position:relative;
	display:inline-block;
	margin:30px;
	width:50px;
	height:50px;
	border-radius:50px;
	background:#aaa;
	box-shadow:inset 0   0   3px white,0   0   3px white,0  5px 13px #888,0 -5px 13px white;
}
li:after {
	content:"";
	width:14px;
	height:14px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-7px 0 0 -7px;
	box-shadow:0 -3px 8px #999,0  3px 8px #ccc;
}
li:nth-of-type(1):after {
	content:"+";
	font-weight:bold;
	font-family:Helvetica;
	font-size:30px;
	margin:-8px 0 0 -9px;
	line-height:14px;
	color:#888;
	box-shadow:none;
	text-shadow:0 -3px 8px #999,0  3px 8px #ccc;
}
li:nth-of-type(2):after {
	background:#888;
	border-radius:14px;
}
li:nth-of-type(3):after {
	background:#888;
}

最终的效果:

shaded-buttons

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

网友评论2条 ,博主回复2

  1. 这几个东东 我看着就喜欢、

    土拨鼠03-04 16:15 回复
  2. http://kn007.net/links/comment-page-4/#comment-7964
    这条留言是你留的吗

    kn007 03-04 14:10 回复

发表我的评论

*

*

取消