在日常開(kāi)發(fā)當(dāng)中，如果想要開(kāi)發(fā)多邊形，一般都需要多個(gè)盒子或者偽元素的幫助，有沒(méi)有一直辦法能只使用一個(gè)盒子實(shí)現(xiàn)呢？
有的：css裁剪

clip-path介紹

css裁剪（clip-path）這個(gè)屬性平時(shí)率非常低。但是其實(shí)clip并不是CSS3的新屬性，很早就開(kāi)始出現(xiàn)了。CSS裁剪的這一概念最早是在CSS 2.1時(shí)代由clip屬性引入，但該屬性的限制非常多。裁剪初期只能應(yīng)用于絕對(duì)定位的元素，并且只能裁剪成矩形。而在CSS3中，提供了強(qiáng)大的clip-path屬性，突破了clip屬性的眾多限制。
clip-path能夠讓你指定一個(gè)網(wǎng)頁(yè)元素的顯示區(qū)域，而不是顯示全部。在過(guò)去有個(gè)等效的屬性clip，但在新的CSS規(guī)范中，它已經(jīng)被標(biāo)志為deprecated，用新的clip-path代替。

clip-path到底是什么？

clip-path 屬性可以創(chuàng)建一個(gè)只有元素的部分區(qū)域可以顯示的剪切區(qū)域。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。clip-path是一個(gè)css3新屬性 , 一般用在svg元素上 , 但是也可以作為普通元素裁剪使用。

clip-path屬性

clip-path屬性可以使用四種裁剪函數(shù)：circle()、ellipse()、inset()和polygon()。
　　下面用一個(gè)例子來(lái)演示這四個(gè)函數(shù)的效果，將它們分別應(yīng)用到四個(gè)div元素中，樣式如下，得到的形狀如下圖所示。

circle()：修建矩形的可視范圍

div {
            background-color: blue;
            height: 200px;
            width: 400px;
            clip-path: circle(50%);
        }

ellipse()：修建圓形的可視范圍

clip-path: circle(50%);

inset()：修建橢圓形的可視范圍

clip-path: ellipse(50% 30%);

polygon()：修建任意多變形的可視范圍

clip-path: polygon(0 0, 100px 0, 160px 200px, 0 200px);

案例

CSS實(shí)現(xiàn)一個(gè)鼓樣式

如果使用其他方法實(shí)現(xiàn)，需要使用到多個(gè)盒子，例如：

像圖中這樣使用3個(gè)盒子。如果使用clip-path，只需要一個(gè)盒子+circle（）。

div {
            background-color: blue;
            height: 200px;
            width: 400px;
            clip-path: circle(50%);
        }

CSS實(shí)現(xiàn)一個(gè)杠鈴樣式

如果使用其他方法實(shí)現(xiàn)，需要使用到多個(gè)盒子，例如：

像圖中這樣使用3個(gè)盒子。如果使用clip-path，只需要一個(gè)盒子+polygon（）。

div {
            width: 200px;
            height: 300px;
            background-color: red;
            clip-path: polygon(0 0,
                    0% 42%,
                    5% 42%,
                    5% 58%,
                    0 58%,
                    0 100%,
                    100% 100%,
                    100% 58%,
                    95% 58%,
                    95% 42%,
                    100% 42%,
                    100% 0);
        }

總結(jié)

相比于傳統(tǒng)的clip屬性只能作用于正方形的裁剪區(qū)域，clip-path可以以任意形狀去裁剪元素，這使得設(shè)計(jì)師可以創(chuàng)建更為復(fù)雜和獨(dú)特的裁剪效果。無(wú)論是絕對(duì)定位、固定定位還是相對(duì)定位的元素，都可以應(yīng)用clip-path屬性。由于clip-path的強(qiáng)大功能，它可以用于實(shí)現(xiàn)一些特殊的動(dòng)畫(huà)效果，如視差廣告效果、菜單欄彈出效果等。通過(guò)使用clip-path，可以將復(fù)雜的形狀和動(dòng)畫(huà)效果封裝在CSS中，使得HTML結(jié)構(gòu)和CSS樣式更加清晰和易于維護(hù)。clip-path屬性在大部分現(xiàn)代瀏覽器中都有良好的兼容性，這使得開(kāi)發(fā)者可以放心地使用它來(lái)創(chuàng)建跨瀏覽器的獨(dú)特視覺(jué)效果。

使用該屬性能夠完成的圖形可能性非常高，許多樣式不需要復(fù)雜的dom才能實(shí)現(xiàn)。只可惜現(xiàn)在還有部分瀏覽器不支持該功能。

到此這篇關(guān)于如何利用CSS裁剪clip-path完成各種圖形的文章就介紹到這了,更多相關(guān)css 裁剪clip-path內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論