为了账号安全,请及时绑定邮箱和手机立即绑定
  • 老师声音好听~
    查看全部
    1 采集 收起 来源:翘边阴影

    2015-02-14

  • 单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。 伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的,用于区分伪类和伪元素。但是伪类兼容现存样式,浏览器需要同时支持旧的伪类,比如:first-line、:first-letter、:before、:after等。 对于CSS2之前已有的伪元素,比如:before和:after,单冒号和双冒号的写法::before和::after作用是一样的。 如果只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。
    查看全部
  • border-radius:100px/10px; 左边的 100px 是每个圆角的水平半径,右边的 10px 是每个圆角的垂直半径。
    查看全部
    1 采集 收起 来源:曲线阴影

    2016-12-19

  • 记得父级一定加背景
    查看全部
    1 采集 收起 来源:曲线阴影

    2015-01-31

  • 1.border-radius: 100px /10px; 水平方向半径 / 垂直方向半径 2.设置盒子的宽高有两种方法第一种是直接设置width和height;第二种是设置position:absolute; top:值;left:值;right:值;bottom:值;设置4个值,间接地设置了width和height,4个值缺一不可 3.曲线阴影效果=1个直角阴影+2个重叠的曲线阴影(2个重叠的曲线阴影要放在直角阴影的下面); 4.全方向阴影 box-shadow: 0 0 10px rgba(0,0,0,.3)就是不设置水平和垂直方向上的阴影距离; 1.border-radius: 100px /10px; 水平方向半径 / 垂直方向半径 2.实心效果 : 多重虚线叠加 3.添加元素大小的两种方式 width & height || top & bottom & left & right 4.无方向阴影 || 全方向阴影 box-shadow: 0 0 10px rgba(0,0,0,.3); position:absolute; top:50%;left:10px;right:10px;bottom:0;设置4个值,间接地设置了width和height,缺一不可 z-index:-1;
    查看全部
    1 采集 收起 来源:曲线阴影

    2018-03-22

  • 本身直角阴影包括:底边直角阴影和内边直角阴影 翘边阴影是需要给盒子做变换的,翘边阴影盒子变换成平行四边形的宽度比直角阴影盒子的大,所以需要设置width;90%;因为阴影距顶部还有点距离所以设置height;80%; 用transform:skew(-10deg) rotate(-4deg);使翘边阴影盒子变为平行四边形且做旋转变换,然后将其背景色设置为透明background:transparent;同时记得将其z-index设置为负值,li的背景要设置成白色(因为翘边阴影盒子有阴影)
    查看全部
    1 采集 收起 来源:翘边阴影

    2016-11-12

  • inset,x轴和y轴同时为0,从中间开始
    查看全部
  • 666
    查看全部
    1 采集 收起 来源:效果演示

    2015-01-22

  • box-shadow给盒子做阴影设置
    查看全部
    1 采集 收起 来源:翘边阴影

    2015-01-21

  • 水平和垂直都是0的时候,阴影在四个边上都有。
    查看全部
  • inset 内部阴影
    查看全部
  • 哦明哦
    查看全部
    1 采集 收起 来源:效果演示

    2015-01-19

  • test
    查看全部
    1 采集 收起 来源:结构编写

    2015-01-19

  • 本身直角阴影包括:底边直角阴影和内边直角阴影 翘边阴影是需要给盒子做变换的,翘边阴影盒子变换成平行四边形的宽度比直角阴影盒子的大,所以需要设置width;90%;因为阴影距顶部还有点距离所以设置height;80%; 用transform:skew(-10deg) rotate(-4deg);使翘边阴影盒子变为平行四边形且做旋转变换,然后将其背景色设置为透明background:transparent;同时记得将其z-index设置为负值,li的背景要设置成白色(因为翘边阴影盒子有阴影)
    查看全部
    1 采集 收起 来源:翘边阴影

    2016-05-25

  • 设置box-shadow时注意浏览器兼容性 X与Y阴影偏移量设为0 然后阴影就能从四个边同时显示
    查看全部

举报

0/150
提交
取消
课程须知
本课程适合有 (X)HTML 和 CSS2 基础及对 HTML5 和 CSS3 有所了解的童鞋们。
老师告诉你能学到什么?
1、如何分析阴影的层叠关系 2、如何使用 box-shadow 属性实现不同角度不同位置的内投影及外投影 3、如何使用 transform 变换中的 skew 与 rotate 实现斜边与曲线效果 4、如何使用 :after 与 :before 生成内容

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!