成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

聊聊clip-path

zqhxuyuan / 1569人閱讀

摘要：這兩個屬性正是今天的重頭戲，博主曾在從隱藏元素談起提起過，但并沒做深入解釋。另外，四個值分別是相對于圖片左上角為原點(diǎn)的坐標(biāo)值。基本所有的瀏覽器都支持，可以放心使用。

前言 
圖片是一個網(wǎng)站必不可少的元素，而呈現(xiàn)出絢麗多彩的圖片效果在很多情況下不僅僅是設(shè)計師的工作，通過代碼來修飾圖片也是一個前端工程師必備的技能。因為兼容性的問題，實(shí)際項目中可能用的比較少，包括博主自己也只是用過幾次剪切，很多情況下都交給設(shè)計師去做了。但作為一個hacker怎么能滿足于此呢，必須深入探究！
正文 Flilter 
filter有十種特效來處理圖片，博主只放幾種特效的樣例給大家看一下：


照片反色效果：




照片褐色效果：




照片陰影效果：

十種特效源碼:

-webkit-filter:opacity(.6);//透明度
filter:opacity(.6);
-webkit-filter:blur(10px);//照片模糊
filter:blur(10px);
-webkit-filter:invert(1);
filter:invert(1);
-webkit-filter:saturate(3);//照片飽和度
filter:saturate(3);
-webkit-filter:grayscale(1);//照片灰度
filter:grayscale(1);
-webkit-filter:sepia(1);//照片褐色
filter:sepia(1);
-webkit-filter:hue-rotate(90deg);//色相旋轉(zhuǎn)
filter:hue-rotate(90deg);
-webkit-filter:brightness(.5);//亮度
filter:brightness(.5);
-webkit-filter:contrast(2);//對比度
filter:contrast(2);
-webkit-filter:drop-shadow(10px 10px 10px #ccc);//陰影
filter:drop-shadow(10px 10px 10px #ccc);
但實(shí)際上這個屬性兼容性很低：

截止博主發(fā)文日期，F(xiàn)ilter的兼容性如上圖，我們可以看到IE是完全不支持的，Edge也是部分支持。這可能也是Filter沒法用在項目中的原因之一了。感興趣的讀者可以Copy博主代碼本地測試一下，或是參照MDN|Filter了解。博主不在這里做過多的說明了。

clip&clip-path 
這兩個屬性正是今天的重頭戲，博主曾在從隱藏元素談起提起過，但并沒做深入解釋。是的，它可以用來隱藏元素，當(dāng)然也就能處理圖片了。

clip

clip這個屬性我相信會有很大一部分人不知道，因為這個屬性使用率非常的低，因為很多情況下我們會直接重新切一張新圖出來代替而不會去剪裁已有的圖片，但實(shí)際上這個屬性用在CSS sprite簡直就如同神器一般，因為在很多情況下background-position并不符合我們的需求，比如,有時我們希望Sprite圖片可以延遲滾動加載，或者是可以很輕松的右鍵圖片另存為...或是其它background-position沒法滿足的情景。
廢話不多說，看樣例：
position:absolute;
clip:rect(50px 250px 250px 50px); /* IE6, IE7 */
clip:rect(50px,250px,250px,50px);

注意，元素定位position必須是absolute或是fixed的，兼容IE6，IE7需要將值之間的逗號去掉。另外，react（top,right,bottom,left）；四個值分別是相對于圖片左上角為原點(diǎn)的坐標(biāo)值。Clip基本所有的瀏覽器都支持，可以放心使用。

讓人放棄它的原因無外乎：



clip 只對絕對定位的元素有效對于position:relative和position:static無效


clip 只能用于矩形，即rect()函數(shù)

clip-path

其實(shí)clip在HTML5中已經(jīng)被廢棄了(依然可用)，取而代之的是clip-path。本來clip還有一個circle(圓)，但基本沒有瀏覽器實(shí)現(xiàn)這個屬性值，只有rect()可是使用，可能W3C也是等不下去了吧，直接推出了一個更牛逼的屬性——clip-path,這個屬性起初是SVG里面的然后被挪用到了CSS里面。關(guān)于SVG博主有時間會再另外介紹，這里按下不表。效果圖：

讀者可以在這里自行體驗

兼容：現(xiàn)在為止IE 和 Edge 不支持這個屬性，F(xiàn)irefox 僅部分支持 clip-path ，
Chrome、Safari 和 Opera 需要使用 -webkit- 前綴支持此屬性。

clip-path兼容性甚至比前面說到的filter還差，所以很難真正使用起來。更多使用效果戳這里和這里

說一下它的四個屬性值：

clip-source: 可以是內(nèi)、外部的SVG的clipPath元素的URL引用;

basic-shape: 使用一些基本的形狀函數(shù)創(chuàng)建的一個形狀。主要包括circle()、ellipse()、inset()和polygon()。

geometry-box: 是可選參數(shù)。此參數(shù)和basic-shape函數(shù)一起使用時，可以為basic-shape的裁剪工作提供參考盒子。如果geometry-box由自身指定，那么它會使用指定盒子形狀作為裁剪的路徑，包括任何(由border-radius提供的)的角的形狀。

開始使用clip-path

在開始使用clip-path繪制圖形，或者說裁剪圖形之前，有兩點(diǎn)需要大家注意：



使用clip-path要從同一個方向繪制，如果順時針繪制就一律順時針，逆時針就一律逆時針，因為polygon是一個連續(xù)線段，若線段彼此有交集，裁剪區(qū)域就會有相減的情況發(fā)生，當(dāng)然如果你特意需要這樣的效果除外。


如果繪制時采用比例的方式繪制，長寬就必須要先行設(shè)定，不然有可能繪制出來的長寬和我們想像的就會有差距，使用像素繪制就不會有這樣的現(xiàn)象。



我們就拿上面途中的六邊形作為polygon()函數(shù)示例：


-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);

效果圖:

講解：

每個點(diǎn)的第一個坐標(biāo)值決定了它在 x 軸上的位置，第二個坐標(biāo)值指定了它在 y 軸的位置，所有點(diǎn)是順時針繪制的。其實(shí)一個 polygon（）就能滿足所有的形狀需要了，有自定義的API用更加方便不是么。

注意：inset()這個真的坑，按說同樣裁剪成方形應(yīng)該是和clip的rect一樣用法，可不一樣！

//Clip的rect
position:absolute;
clip:rect(50px 250px 250px 50px);
//clip-path
clip-path: inset(50px 50px 50px 50px);
-webkit-clip-path: inset(50px 50px 50px 50px);

本文使用圖片是300*300的。

很明顯：
clip:rect(50px 250px 250px 50px);
=clip-path: inset(50px 50px 50px 50px);

好大的一個坑....

結(jié)束語 
相信隨著時代發(fā)展，clip-path會慢慢被瀏覽器廠商接受的。
本文有任何錯誤，歡迎評論留言。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111538.html

相關(guān)文章

  • SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

    摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現(xiàn)出多種樣式。可以讓屬性的變化過程持續(xù)一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

    elliott_hu 評論0 收藏0

  • 使用CSS3的clip-path(裁剪路徑)實(shí)現(xiàn)剪貼區(qū)域的顯示以及實(shí)例實(shí)現(xiàn)圖片漸變

    摘要：介紹直譯過來就是裁剪路徑，使用或形狀定義一個元素的可見區(qū)域的方法。想象一下你在中勾勒路徑的場景。上是這樣介紹的屬性可以防止部分元素通過定義的剪切區(qū)域來顯示，僅通過顯示的特殊區(qū)域。屬性代替了現(xiàn)在已經(jīng)棄用的剪切屬性。clip-path介紹 clip-path 直譯過來就是裁剪路徑，使用SVG或形狀定義一個HTML元素的可見區(qū)域的方法。想象一下你在Photoshop中勾勒路徑的場景。MDN上是這樣...

    番茄西紅柿 評論0 收藏0

  • 不可思議的CSS之clip-path

    摘要：一個用來生成各種形狀包括隨意拖拉自定義并且可以直接生成代碼的網(wǎng)站。兼容性目前兼容性較差，和直接不支持，考慮兼容性的同學(xué)可以暫時等等。透明區(qū)域表示被裁剪的區(qū)域基本圖形定義一個矩形。語法說明可選，表示填充規(guī)則用來確定該多邊形的內(nèi)部。 本文首發(fā)于 我的博客 曾經(jīng)和某位朋友在聊天中討論過這樣一個話題：綜合90%的網(wǎng)站的布局以及頁面中的元素不是方的，就是圓的。就像所有的顏色都是由三原色（RGB）...

    walterrwu 評論0 收藏0

  • CSS中clip-path屬性的使用

    摘要：的使用值為多個坐標(biāo)點(diǎn)組成，坐標(biāo)第一個值是方向，第二個值是方向。值為橢圓的軸半徑，軸半徑，定位橢圓的坐標(biāo)三部分組成。 clip-path的使用 polygon 值為多個坐標(biāo)點(diǎn)組成，坐標(biāo)第一個值是x方向，第二個值是y方向。 左上角為原點(diǎn)，右下角是(100%,100%)的點(diǎn)。 body { background-color: #000; } .fa { border: 1px ...

    KnewOne 評論0 收藏0

  • CSS中clip-path屬性的使用

    摘要：的使用值為多個坐標(biāo)點(diǎn)組成，坐標(biāo)第一個值是方向，第二個值是方向。值為橢圓的軸半徑，軸半徑，定位橢圓的坐標(biāo)三部分組成。 clip-path的使用 polygon 值為多個坐標(biāo)點(diǎn)組成，坐標(biāo)第一個值是x方向，第二個值是y方向。 左上角為原點(diǎn)，右下角是(100%,100%)的點(diǎn)。 body { background-color: #000; } .fa { border: 1px ...

    levius 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<