zoukankan      html  css  js  c++  java
  • Css--深入学习之折角效果

    本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:【css进阶】伪元素的妙用--单标签之美奇思妙想

    代码:
     1   /*建立一个带圆角的矩形,并使用线性渐变将其从左到底透明渐变到深绿色,然后使用2D旋转矩形*/
     2         .corner:before{
     3           content: '';
     4           position: absolute;
     5           top: 0; right: 0;
     6           background:
     7           linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat; 
     8           /*线性渐变:从左到底(也就是从左边到最底部,斜切过来),
     9             透明50%的宽度渐变到rgba(0,0,0,.2) 0,,再到rgba(0,0,0,.4))
    10             background-size:100% 0
    11             不重复或平铺 
    12           */
    13           width: 1.73em; height: 3em;
    14           transform: translateY(-1.3em) rotate(-30deg);
    15           /*translateY(-1.3em):y轴方向平移-1.3em,就向上移动出去了一点
    16               rotate(-30deg):  平面旋转-30度
    17           */
    18           transform-origin: bottom right;
    19           border-bottom-left-radius: inherit;
    20           box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
    21         }
    22         /*原理其实就是一个带切角的圆角矩形与一个小圆角矩形旋转拼合而成*/
  • 相关阅读:
    CXF.bat
    终于懂了:FWinControls子控件的显示是由Windows来管理,而不是由Delphi来管理(显示透明会导致计算无效区域的方式有所不同——透明的话应减少剪裁区域,所以要进行仔细计算)
    DELPHI语法基础学习笔记-Windows 句柄、回调函数、函数重载等(Delphi中很少需要直接使用句柄,因为句柄藏在窗体、 位图及其他Delphi 对象的内部)
    Delphi体系内部的4种消息传递办法(Send,Post,Perform,Dispatch)
    delphi高手突破之异常及错误处理
    Android 短信模块分析(三) MMS入口分析
    delphi如何加上spliter分割条,任意调整大小
    浅拷贝与深度拷贝(原型模式)
    delphi高手突破学习笔记之面向对象类和对象的本质(有汇编解释 good)
    delphi模态窗体最小化会隐藏的问题
  • 原文地址:https://www.cnblogs.com/leona-d/p/6047654.html
Copyright © 2011-2022 走看看