这就是今天所要提到的box-reflect属性。 咱们先看看W3C给出的box-reflect语法: box-reflect:none | ?...repeating-linear-gradient> | (分别代表:没有遮罩图片 | 遮罩图片路径 | 线性渐变 | 径向渐变 | 重复线性渐变 | 重复径向渐变) 默认值:none box-reflect...兼容性: box-reflect虽然看起来效果很不错,但是遗憾的是,目前只有webkit内核浏览器兼容,不过移动端基本已经没有任何问题啦~~ 扫码下方二维码, 随时关注更多前端干货文章!
CSS3 倒影语法 语法: box-reflect:none | ?... none:此值为box-reflect默认值,表示无倒影效果; direction:此值表示box-reflect生成倒影的方向,主要包括以下几个值: above:表示生成的倒影在对象...给生成的倒影添加遮罩效果的时候,如果没有设置显式的间距offset将会让box-reflect失效。...也就是说,当box-reflect属性中的mask-box-image属性值出现时,必须显式的设置offset值,如果不需要间距,将其设置为0。
渐变 background:linear-gradient(red, green, blue); 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); 倒影 box-reflect
background:linear-gradient(red, green, blue); 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); 倒影 box-reflect
248,0.8); } div { color: rgba(255, 179, 140,0.5); text-shadow: 3px 3px 0 rgba(180,255,0,0.5); } box-reflect
background: #000; } .wavy { position: relative; /* box-reflect
火狐浏览器中倒影的实现 目前只有Webkit浏览器(谷歌浏览器和Safari浏览器)实现 box-reflect 属性。
不过使用起来真的是方便,解题如下: div{ -webkit-box-reflect: below; } -webkit- 内核下查看Demo box-reflect 有四个方向可以选,below
color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1))); } 火狐浏览器中倒影的实现 目前只有Webkit浏览器(谷歌浏览器和Safari浏览器)实现box-reflect
+padding+content border-box 怪异盒模型 width/height与设置的值一样 ,content减小3、2D改换、3D改换 6、盒子暗影、影子 box-shadow 暗影 box-reflect
使用css3 box-reflect设计图片倒影效果,参考代码如下: img { height:250px; -webkit-box-reflect
避免使用通配符选择器(*)和属性选择器 (2) 谨慎使用 CSS3 特性 CSS3一些新特性能带来酷炫的视觉效果,但对设备性能有一定要求 border-radius gradient box-shadow box-reflect
animation01{} 过度 transition 颜色透明度 rgba 圆角 border-radius 渐变 background:linear-gradient() 阴影 box-shadow 倒影 box-reflect
---- order:设置弹性盒子的顺序 允许调整大小 reisze: both none horizontal vertical 倒影 box-reflect:a b c; a:left/right/
mask-box-image-repeat", "mask-box-image-slice", "box-shadow", "box-reflect
在线演示 倒影加载条 要点:带有渐变倒影的加载条 场景:加载提示 兼容:box-reflect、animation 代码:在线演示 ?
mix-blend-mode 不为 normal) 剪切路径(clip-path) 2D 或 3D 转换(transform 不为 none) 隐藏背面(backface-visibility: hidden) 倒影(box-reflect
linear-gradient(red, green, blue); 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); 倒影 box-reflect
领取专属 10元无门槛券
手把手带您无忧上云