zoukankan      html  css  js  c++  java
  • ↗☻【css】clip:rect(number number number number)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    
    <body>
    <style type="text/css">
    .textTop{
    color:#cc0000;
    font-size:24px;
    clip:rect(auto auto 15px auto);
    position:absolute;
    }
    
    /**
    clip:rect(number number number number)
    依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切。
    四个方位都是以左上角为基准,下方位从左上角下数15,去掉下面(下面体现在这里)的9,上方位从左上角下数15,去掉上面的15。
    必须将position的值设为absolute,此属性方可使用。
    **/
    
    .textBottom{
    color:#3399ff;
    font-size:24px;
    clip:rect(15px auto auto auto);
    position:absolute;
    }
    </style>
    <a href="#" class="textTop">多彩文字 multicolor</a>
    <a href="#" class="textBottom">多彩文字 multicolor</a>
    </body>
    </html>
  • 相关阅读:
    Typora上传图片设置
    SpringBoot入门详细教程
    vue
    我才学习到的严格模式(越往后看,越感觉复杂啊)
    js中三种定义变量的方式const, var, let的区别。
    冒泡
    tab切换
    日历
    jquery实现拖拽进度条并显示百分比的特效
    抽奖代码
  • 原文地址:https://www.cnblogs.com/jzm17173/p/2590569.html
Copyright © 2011-2022 走看看