zoukankan      html  css  js  c++  java
  • 倒影box-reflect(可图片可文字)

    需要写兼容写法:

    -webkit-box-reflect:below 3px -webkit-(repeating)linear/redial-gradient(...);

    1.先写direction定义方向:

    above:倒映在其对象的上边

    below:倒映在其对象的下边

    left:左边

    right:右边

    2.offset定义对象与倒影的距离,默认为0,取值包括px和百分比,百分比是根据对象的大小进行确定。px和百分比都可为负值。

    <offset>

    • <length>

      用长度值来定义倒影与对象之间的间隔。可以为负值

    • <percentage>

      用百分比来定义倒影与对象之间的间隔。可以为负值

    3.mask-box-images定义

    <mask-box-image>

    • none:

      无遮罩图像

    • <url>

      使用绝对或相对地址指定遮罩图像。

    • <linear-gradient>

      使用线性渐变创建遮罩图像。

    • <radial-gradient>

      使用径向(放射性)渐变创建遮罩图像。

    • <repeating-linear-gradient>

      使用重复的线性渐变创建背遮罩像。

    • <repeating-radial-gradient>

       使用重复的径向(放射性)渐变创建遮罩图像。

      众所周知,玩过前端的人一定对3D相册感到很寻常,而是用倒影标签之后往往可以给人眼前一亮的视觉冲击,多这一个标签就可以使你的网页效果翻倍

     

  • 相关阅读:
    洛谷1509 找啊找啊找GF
    要怎样努力,才能成为很厉害的人?
    随笔
    2018NOIP模拟题 曲线
    洛谷4147 玉蟾宫
    洛谷2258 子矩阵
    Vijos 纸牌
    [leetcode] Word Break
    [leetcode] Maximum Binary Tree
    [leetcode] Binary Tree Preorder Traversal
  • 原文地址:https://www.cnblogs.com/dubutianxia/p/12609719.html
Copyright © 2011-2022 走看看