zoukankan      html  css  js  c++  java
  • CSS3文字倒影

    1,文字倒影与文字投影并不是一回事

          投影文字跟原文字是平行移动的,而倒影文字与原文字是对称的

    2,文字倒影的属性是webkit-box-reflect

     -webkit-box-reflect: above-10px;

    -webkit-box-reflect: below -10px;

    -webkit-box-reflect: left-10px;

    -webkit-box-reflect: right-10px;

    是各个方向的投影,以及投影与原文字图形之间的距离。

    3.可以根据需求自己定义颜色、文字显示,以及渐变色等。

    -webkit-box-reflect: right-10px;

    color:red;

    或者定义渐变色:

    -webkit-box-reflect: below -28px
    -webkit-gradient(linear,left top,left bottom, from(rgba(0,0,0,0)),to(rgba(255,255,255,0.1)));

    <div class="row row1">
    	<div class="erp">ERP</div>
    	<div class="plm">PLM</div>
    </div>
    

      

    .row1{
                position: absolute;
                left: 0;
                top: 124px;
                height: 73px;
                div{
                  font-size: 72px;
                  font-weight: bold;
                  color: #50fdff;
                  float: left;
                   645px;
                  -webkit-box-reflect: below -28px
                  -webkit-gradient(linear,left top,left bottom, from(rgba(0,0,0,0)),to(rgba(255,255,255,0.1)));
                }
              }
    

     效果图

     

  • 相关阅读:
    NIO 学习笔记
    Spring Boot 学习笔记
    Java集合框架
    StringBuffer&StringBuilder类
    String 类
    Java 重写 hashCode() 和 equals() 方法
    Java 基本数据类型 && 位运算
    [SequenceFile_1] Hadoop 序列文件
    Windows 下端口被占用
    Java 反射机制
  • 原文地址:https://www.cnblogs.com/iamlhr/p/11213215.html
Copyright © 2011-2022 走看看