查看: 659|回复: 0
打印 上一主题 下一主题

css3 box-shadow阴影(外阴影与外发光)讲解

[复制链接]
  • TA的每日心情
    开心
    2017-7-5 20:14
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    1702

    主题

    1711

    帖子

    7386

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    7386
    跳转到指定楼层
    楼主
    发表于 2019-5-20 20:31:33 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
    效果图:


    使用说明:
    外阴影:box-shadow: X轴??Y轴??Rpx??color;
    内阴影:box-shadow: X轴??Y轴??Rpx??color??inset;
    属性说明(顺序依次对应):阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色

    默认是外阴影
    内阴影:inset 可以设置成内部阴影

    注(PS):此属性使用于盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 不是用来设置文字阴影? ?如果设置文字阴影请参考知识点:text-shadow(同理)

    因为是新属性,为了兼容各主流浏览器并支持这些主浏览器的较低版本时
    box-shadow
    -webkit-box-shadow
    -moz-box-shadow
    -o-box-shadow
    -ms-box-shadow

    代码


    1. ??
    2. ? ? Page title
    3. ? ?? ???
    4. ??

    5. ??
    6. ? ?? ???
      shadow1

    7. ? ?? ???
      shadow2

    8. ? ?? ???
      shadow3

    9. ? ?? ???
      shadow4

    10. ? ?? ???
      shadow5

    11. ??

    复制代码

    资源帝国 - 论坛版权1、本主题所有言论和图片纯属会员个人意见,与本论坛立场无关
    2、本站所有主题由该帖子作者发表,该帖子作者与资源帝国享有帖子相关版权
    3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和资源帝国的同意
    4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
    5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
    6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
    7、资源帝国管理员和版主有权不事先通知发贴者而删除本文

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|资源帝国 ( 皖ICP备14009953号 )?

    GMT+8, 2019-9-29 13:36 , Processed in 0.060521 second(s), 28 queries .

    Powered by Discuz! X3.2

    ? 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表