为了账号安全,请及时绑定邮箱和手机立即绑定
  • box-shadow:添加一个或多个阴影 参数: h-shadow(必需):水平阴影的位置,允许负值 v-shadow(必需):垂直阴影的位置,允许负值 blur(可选):模糊距离 spread(可选):阴影的尺寸 color(可选):阴影的颜色 inset(可选):将外部阴影(outset)改为内部阴影
    查看全部
    3 采集 收起 来源:box-shadow讲解

    2015-01-19

  • 曲线阴影的实现原理:先给图形设置一个主投影。在目标图形下方设置一个圆角图形,给它设置一个圆角阴影,将两个图形重叠,背景色相同,出现曲线阴影
    查看全部
    3 采集 收起 来源:原理分析

    2016-08-10

  • 曲线阴影效果=1个直角阴影+2个重叠的曲线阴影(2个重叠的曲线阴影要放在直角阴影的下面); 正投影与圆角阴影重叠需要设置定位,相对定位元素为父元素effect 要让曲线投影这个盒子有一个尺寸,要么直接设置宽和高,要么对四个方向的值进行设置(浏览器会自动计算该盒子应有的大小,一定要是四个方向的值) 曲线阴影实质是圆角的阴影,所有曲线阴影盒子要设置border-radius;100px/10px;分别代表水平方向半径和垂直方向半径 让曲线阴影盒子位于下方的办法是设置z-index(=-1)小于直角阴影盒子 曲线投影不实的问题:与透明度关系不大,所以调节透明度影响不大。好的办法是让两个投影重叠在一起,即在直角阴影盒子内容的前面:before和后面:after都插入曲线投影盒子(都有绝对定位和且位置都是一样)
    查看全部
    3 采集 收起 来源:曲线阴影

    2016-05-24

  • 曲线阴影的实现原理:先给图形设置一个主投影。在目标图形下方设置一个圆角图形,给它设置一个圆角阴影,将两个图形重叠,背景色相同,出现曲线阴影
    查看全部
    2 采集 收起 来源:原理分析

    2016-01-20

  • 老师,没必要设置两个盒子让其重叠吧,只设置一个盒子然后给这个盒子设置2次阴影效果是一样的。
    查看全部
    2 采集 收起 来源:曲线阴影

    2015-08-16

  • 曲线阴影效果=1个直角阴影+2个重叠的曲线阴影(2个重叠的曲线阴影要放在直角阴影的下面); 正投影与圆角阴影重叠需要设置定位,相对定位元素为父元素effect 要让曲线投影这个盒子有一个尺寸,要么直接设置宽和高,要么对四个方向的值进行设置(浏览器会自动计算该盒子应有的大小,一定要是四个方向的值) 曲线阴影实质是圆角的阴影,所有曲线阴影盒子要设置border-radius;100px/10px;分别代表水平方向半径和垂直方向半径 让曲线阴影盒子位于下方的办法是设置z-index(=-1)小于直角阴影盒子 曲线投影不实的问题:与透明度关系不大,所以调节透明度影响不大。好的办法是让两个投影重叠在一起,即在直角阴影盒子内容的前面:before和后面:after都插入曲线投影盒子(都有绝对定位和且位置都是一样)
    查看全部
    2 采集 收起 来源:曲线阴影

    2016-11-12

  • 重叠阴影,加深效果
    查看全部
    1 采集 收起 来源:曲线阴影

    2016-03-09

  • transform语法: 功能:向元素应用2D或3D转换 语法:transform:none|transform-functions 参数:skew(x-angle,y-angle)定义沿着X和Y轴的2D倾斜转换 skewX(angle)定义沿着X轴的2D倾斜转换 skewY(angle)定义沿着Y轴的2D倾斜转换。 rotate:设置图形旋转角度 rotate(-30deg); //向左旋转30度 z-index:-2;图形转化到复盒子的下面
    查看全部
    1 采集 收起 来源:翘边阴影

    2015-11-25

  • 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

  • CSS3中:after和:before的用法讲解 :after 选择器:在被选元素的后面插入内容 :before 选择器:在被选元素的前面插入内容 说明:需使用content属性来指定要插入的内容 浏览器兼容:对于IE8及更早版本中的:after,必须声明<!DOCTYPE>
    查看全部
  • box-shadow:h-shadow v-shadow blur spread color inset 必需:h-shadow(水平),v-shadow(垂直) 可选:blur(模糊距离),spread(阴影尺寸),color(阴影颜色),inset(内阴影)
    查看全部
    1 采集 收起 来源:box-shadow讲解

    2015-04-11

  • 曲线投影

    1. 主投影

    2. 弧度的图形,在主图形下

      https://img1.sycdn.imooc.com//5c04d03500013f2405590282.jpg

    查看全部
    1 采集 收起 来源:原理分析

    2018-12-03

  • 曲线阴影/翘边阴影

    查看全部
    1 采集 收起 来源:效果演示

    2018-12-03

  • box-shadow的一些属性:
    查看全部
    1 采集 收起 来源:box-shadow讲解

    2018-02-05

  • BOX-shadow box-shadow:h-shadow v-shadow blur spread color inset; h-shadow(必需):水平阴影的位置。允许负值。 v-shadow(必需):水平阴影的位置。允许负值。 blur(可选):模糊距离。 spread(可选):阴影的尺寸。 color(可选):阴影的颜色。请参考css颜色值。 inset(可选):将外部阴影(outset)改为内部阴影。
    查看全部
    1 采集 收起 来源:box-shadow讲解

    2017-04-19

首页上一页1234567下一页尾页

举报

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

微信扫码,参与3人拼团

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

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