倒影问题（reflect:below）

这个例子灵感来源于实现一个登录框下方的倒影：

.box {    width: 300px;    height: 200px;    border: 1px solid #1f637b;    -webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(255, 255, 255, 0.0),rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.1), rgba(100, 119, 135, 0.5));    color: #fff;    position: absolute;    top: 100px;    margin: 100px auto;    border-radius: 5px;    border-color: rgba(255,255,255,0.5);    box-shadow: 1px 1px 14px rgba(255, 255, 255, 0.4), inset -11px 3px 131px rgba(100, 119, 135, 0.8);}

.login,.reset{    width: 90px;    height: 30px;    border-color: rgba(77, 96, 110, 0.1);    background: rgba(140, 155, 165, 0.5);    color: #fff;    font-size: 17px;    margin-left: 36px;    margin-top: 14px;    border-radius: 5px;    -webkit-box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2), inset 0 20px 30px rgba(26, 39, 47, 0.5);    -moz-box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2), inset 0 20px 30px rgba(26, 39, 47, 0.5);    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.2), inset 0 20px 30px rgba(26, 39, 47, 0.5);}

实现效果：

关键点：倒影的取色和位置需要与上面的颜色对应，用透明度控制即可；（添加两到三个红色，因为倒影最淡的颜色部分其实就是红色，添加两个可使之更加自然）；

转载于:https://www.cnblogs.com/LindaBlog/p/10451803.html

倒影问题（reflect:below）相关推荐

Html5和Css3的基础标签及常用属性
H5 H5的常用标签及属性: 新增和废弃新增的结构(布局) 标签:section.artcle.nav.footer.header.hgroup.Aside.figure 新增的其他标签: Vide ...
css3 shadow阴影
阴影部分 Shadow(阴影) text-shadow是给文本添加阴影效果,使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2 ...
css原地颠倒 h5_H5案例分享：CSS3 reflect倒影
CSS3 reflect倒影说起倒影效果,在传统网页中,我们只能使用photoshop事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发的效率.而现在CSS3有一个属性box-ref ...
Video Copilot Reflect for Mac(AE倒影插件)
vc reflect插件上线了,一款支持安装在最新版本的After Effects中使用的AE倒影插件虽然参数简单,但功能却非常完善,利用VC Reflect你完全可以定制你自己的倒影. Reflec ...
threejs获取模型坐标_Threejs倒影实现解析
倒影是在自然界中非常常见的一种现象,例如水面倒影.镜子.我们都知道,眼睛之所以能够看到某个物体,是因为物体本身能够发光或者物体能够反射其它的物体所发的光,这些光进入到我们的眼里就形成了该物体影像.倒影 ...
前端基础学习笔记背景渐变倒影遮罩
背景首先分享一个css利用渐变实现的图案源代码网站:https://leaverou.github.io/css3patterns/ background-size: X Y;改变背景图片的大小具 ...
-webkit-box-reflect属性简介及元素镜像倒影实现
一.从前有只鸭子从前有只鸭子,长得不是一般的丑: 于是,鸭子一直很自卑,从来不敢照镜子,也不敢下河游泳.别的鸭子很喜欢下河游泳,因为可以一边玩耍,一边上WC,让吃进去的东西舒舒服服从后面出来:而这只 ...
【Unity3d Shader】角色投影与倒影
' 投影的计算公式:已知光线方向.投影面,和两个点A和B,求A和B在投影面上的位置A'和B 倒影的计算公式: Shader "mgo/hero_shadow_reflection" ...
three.js的examples的ocean的水面镜面倒影笔记
https://threejs.org/examples/?q=ocean#webgl_shaders_ocean 思路从镜面上看到反射的物像是因为物体表面的光线经镜面反射到达了人眼(camera) ...

倒影问题（reflect:below）

倒影问题（reflect:below）相关推荐

最新文章

热门文章