css{clip：rect}好玩的属性

最新推荐文章于 2025-05-18 09:32:05 发布

原创最新推荐文章于 2025-05-18 09:32:05 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#clip #rect #css #剪裁 #前端

前端布局专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了CSS中clip属性的应用，通过实例展示了如何利用clip属性实现动态剪裁效果，无需JavaScript即可完成炫酷视觉变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说的不周的欢迎大牛指正、补充！

未经允许，不得转载！

这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

所有浏览器都支持CSS2 clip，属性值有：shape(top,right,bottom,left)、auto、inherit；注意注意所有IE版本的浏览器都不支持inherit属性！

看效果：

html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>http://blog.youkuaiyun.com/ime33 CSS clip</title>
        <style type="text/css">
            *{padding: 0;margin: 0}
            a{text-decoration: none;margin-top: 15px;pointer-events:none;}
            ul,li{list-style: none;}
            .list-inline {
                padding-left: 0;
                margin-left: -5px;
                list-style: none;
            }
            ul.items {
                margin: 0 auto;
                margin-top: 30px;
                position: relative;
                z-index: 10;
            }
            .list-inline>li {
                display: inline-block;
                padding-right: 5px;
                padding-left: 5px;
            }
            ul.items li {
                width: 128px;
                height: 230px;
                margin: 0 20px;
                overflow: hidden;
            }
            ul.items li u {
                display: block;
                position: absolute;
                width: 128px;
                height: 128px;
                background: url(http://www.group.com/templets/Images/words.png) no-repeat 0px -624px;
                -webkit-transition: all .5s ease-in-out 0s;
                -moz-transition: all .5s ease-in-out 0s;
                -ms-transition: all .5s ease-in-out 0s;
                -o-transition: all .5s ease-in-out 0s;
                transition: all .5s ease-in-out 0s;
            }
            ul.items li i {
                display: block;
                position: relative;
                margin: 0 auto;
                margin-top: 28px;
                height: 70px;
            }
            ul.items li.se i {
                width: 54px;
                background: url(http://www.group.com/templets/Images/words.png) no-repeat -144px -632px;
            }
            ul.items li strong {
                display: block;
                margin: 200px 0px 10px 0px;
                font-size: 16px;
                text-align: center;
                -webkit-transition: all .5s ease-in-out 0s;
                -moz-transition: all .5s ease-in-out 0s;
                -ms-transition: all .5s ease-in-out 0s;
                -o-transition: all .5s ease-in-out 0s;
                transition: all .5s ease-in-out 0s;
            }
            ul.items li strong {
                margin-top: 50px;
            }
            ul.items li p {
                line-height: 20px;
                text-align: center;
            }
            p {
                margin: 0 0 10px;
            }
            ul.items li u.cl{clip:rect(0px,128px,-10px,64px);}
            ul.items li:hover u.cl{clip:rect(0px,128px,128px,64px);}
            ul.items li u.cr{clip:rect(128px,64px,128px,0px);}
            ul.items li:hover u.cr{clip:rect(0px,64px,128px,0px);}
        </style>
    </head>
    <body>
        <ul class="items list-inline">
            <li class="se">
                <u class="cl"></u>
                <u class="cr"></u>
                <i></i><strong>搜索引擎</strong>
                <p>SEO 优化<br>搜索引擎竞价</p>
            </li>
        </ul>
       
    </body>
</html>

很炫的一个特效！不用js控制，CSS妥妥的！

主要css：

ul.items li u.cl{clip:rect(0px,128px,-10px,64px);}
            ul.items li:hover u.cl{clip:rect(0px,128px,128px,64px);}
            ul.items li u.cr{clip:rect(128px,64px,128px,0px);}
            ul.items li:hover u.cr{clip:rect(0px,64px,128px,0px);}

感谢阅读！！