zoukankan      html  css  js  c++  java
  • 倒影问题(reflect:below)

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

    .box {
    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{
    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);
    }
    实现效果:


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











    没有人能一路单纯到底,但是要记住,别忘了最初的自己!
  • 相关阅读:
    set的使用
    this.$watch(),this.$set(),this.$nextTick()=>{})
    web 错误代码解析
    samba 问题解决
    Linux postfix配置方法
    Linux rhcsa认证考试试题模拟
    Linux 使用nmcli配置网络
    Linux 链路聚合
    Linux ISCSI服务配置
    Linux Apache配置https访问
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/10451803.html
Copyright © 2011-2022 走看看