• 前端分享学习博客,探究前端相关技术,推动天朝前端发展,有任何问题都可以留言一起探究
  • 由于站内自链接问题,部分pre中的代码首字母使用大写以过滤筛选
  • 欢迎友链互换,还有,如果有大神请不要黑我的站点(o´・ェ・`o)
  • 如果你觉得博客还不错,请Ctrl+D收藏( *︾▽︾)

css3 shadow

css3手册 薛 陈磊 364次浏览 已收录 2个评论 扫描二维码

通过使用css3中的shadow,可以给dom元素和文本加上阴影效果,分别是通过使用box-shadow和text-shadow来实现效果;

css3 box-shadow:

css3中box-shadow的基本用法是:box-shadow{ 2px 3px};其中2px是x轴偏移像素,3px是y轴偏移像素,shadow的颜色默认是黑色,看个例子:

css3 shadow

style code:

div {
    width: 200px;
    height: 200px;
    padding: 15px;
    background-color: green;
    box-shadow: 5px 10px;
}

想定义阴影颜色写在值后面,如box-shadow: 5px 10px red;

三个值的时候给阴影加上模糊效果:

css3 shadow

style code:

div {
    width: 200px;
    height: 200px;
    padding: 15px;
    background-color: green;
    box-shadow: 5px 10px 2px red;
}

当box-shadow定义四个值的时候,最后一个值是定义阴影面积扩展的,也就是向四面展开的宽度;

css3 text-shadow:

css3中text-shadow的基本用法是:text-shadow{ 2px 3px};其中2px是x轴偏移像素,3px是y轴偏移像素,shadow的颜色默认与字体颜色有关,看个例子:

css3 shadow

额有点头晕,第二行偏左下方的就是阴影效果,style code:

#shadow {
    text-shadow: 5px 10px;
    color:red;
}

当然也可以自定义阴影颜色:

css3 shadow

style code:

#shadow {
    text-shadow: 5px 10px blue;
    color:red;
}

三个值的时候是给阴影加上模糊效果:

css3 shadow

style code:

#shadow {
    text-shadow: 5px 10px 2px blue;
    color:red;
}

也可以加上多个阴影效果:

css3 shadow

style code:

#shadow {
    text-shadow: 0 0 3px red, 0 0 5px blue;
}

注意这里水平竖直方向的值给的是0,这样写阴影就从字体本身开始模糊扩散,并没有位移;

Text-shadow兼容:

css3 shadow

box-shadow兼容:

css3 shadow


薛陈磊的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明css3 shadow
喜欢 (0)
[905044086@qq.com]
分享 (0)
作者薛陈磊
关于作者:
非著名前端工程师,关注Html5、Css3、Javascript、Node.js和各种前端框架发展,学习管理技巧和团队建设方法,期待遇到更多前端小伙伴一起学习进步;
说点什么...
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 斯阔以 :grin:
    xiaoyin2016-12-22 10:57 回复 Windows 7 | Chrome 52.0.2743.116
  2. 楼主,这个对我帮助很大谢谢!
    可爱妹子2016-12-22 10:56 回复 Windows 7 | Firefox 50.0