CSS實現倒影 Day80

2021-09-07 05:22:44 字數 1048 閱讀 8824

發現這個功能的時候非常開心,結果不想居然是個殘次品,讓我不禁想起了「天龍八部」上段譽的六脈神劍,在這個瀏覽器上能夠。在還有乙個上就無論了啊,時靈時不靈的,只是有總比沒有要來的好,一點點積累,總能攢齊的。

這個是在-webkit核心瀏覽器上支援的:-webkit-box-reflect

簡介下這個樣式。能夠有三種屬性,方向、距離、其它樣式

首先來看方向的話,存在四種可能性,left、right、below和above,上下左右嘛,來簡單看下效果,寫段簡單的**:

#run1

#run2

#run3//這裡是為了方便檢視

#run4

這樣分別來看下效果: 

然後。第二個屬性則是距離原影象的位置,這個則能夠使用length距離來實現。也能夠利用百分比percentage來實現(這裡感覺這個百分比應該是相比較要操作物件來的),改動下樣式來看下效果

看起來的話length方法的設定看起來更明顯,也更easy操作,所以還是建議用length

最後就是其他樣式了,例如說看以下的

#run2
而實現的效果是:

臨時記錄下當前瀏覽器的實現,然後今天還看到了個非常潮的詞,蒙版,我還真沒做過呢,改天要看看

python全棧開發day80 評論樓 評論樹

內容總結 1.內容回顧 1.內容回顧 1.通過ajax傳送到後端 1.給回覆按鈕繫結點選事件 1.要給未來的標籤繫結事件一定要用事件委託 事件委託利用的原理是事件冒泡 2.jquery事件委託的寫法 已經存在的標籤 on click repaly function 2.jquery物件.data 1...

css3實現漂亮的倒影效果

實際上還有很多css新屬性並未包含進css3官方標準中。webkit box reflect屬性就是以谷歌瀏覽器為代表的webkit渲染引擎獨有的特徵。webkit box reflect的作用是讓出現倒影。html css樣式 img效果 如果希望倒影和之間有空隙可是設定css樣式 img效果如圖...

CSS實現強制換行 Day 78

其實最早的時候也考慮過這個問題,當時還在想需要判定文字的長度麼,實在是傻到極點了,原來css中本來就有這個樣式設定的。而今天正好看到了有這麼一篇介紹,仔細看了下,感覺還不錯,這裡也把實驗的結果記錄下。初始階段 comedycookidespitelovedescriptiondescription ...