盒子内阴影和文字内阴影
七娃博客1,390人阅读
先看效果图:
是不是很漂亮,这就要使用css的内阴影属性了。很简单,下面我们就去揭开它的面纱:
盒子内阴影CSS:
box-shadow: inset 8px 8px 16px #90bac7,inset -8px -8px 12px #c3f0ff;
当然,需要设置背景色,阴影色要与背景色接近。以下是案例的css:
body { background: #ADD8E6; } .box { border-radius: 50%; width: 300px; height: 300px; line-height: 300px; margin: 150px auto 0 auto; text-align: center; background: #ADD8E6; box-shadow: inset 8px 8px 16px #90bac7, inset -8px -8px 12px #c3f0ff; }
是不是很简单?
那么文字内阴影呢?不能再用box-shadow了,那样背景一块色,只能用text-shadow
text-shadow: 2px 2px 0px #90bac7, -1px -1px 0px #c3f0ff
以下为案例css:
.box span { font-size: 40px; color: #ADD8E6; text-shadow: 2px 2px 0px #90bac7, -1px -1px 0px #c3f0ff }
评论 | 0 条评论
登录之后才可留言,前往登录