Css 深入學習之切角

2022-05-24 10:03:07 字數 1654 閱讀 7988

本文是作者從別的**和文章學習了解的知識,簡單做了個筆記,想要學習更多的可以參考這裡:【css高階】偽元素的妙用--單標籤之美,奇思妙想

帶切角的矩形:

該圖**於(奇思妙想)

css**:

.notching.notching
1、建立乙個矩形

2、利用線性漸變實現切角,科普一下**知識:

linear-gradient             css3的線性漸變

(135deg,                     漸變角度,看張圖秒懂

transparent 15px,                 透明 15px的寬度

deeppink 0) 深粉色,              這裡的0是漸變到底

top left;                               漸變填充 上左

3、根據第乙個寫好的(上左)漸變:linear-gradient(135deg, transparent 15px, deeppink 0)top left

然後複製貼上,調整角度同樣的去填充好上右,下左,下右。ok,現在還看不錯啥效果。

4、最後一步,設定下background-size: 50% 50%; background-repeat: no-repeat;

(background-size: 50% 50%;【解釋一下:把每個方向的填充看成乙個小方塊,每個填充的小方塊x,y都佔據了其50%,也就是每個小方塊的是x*50%,y*50%這樣子,所以,呢,為了讓他剛好填充合適就是50%了,如果是40%你會發現小方塊太小了,填充不慢,如果是100%你會發現太大了,佔滿了都。】

最後乙個就是不要重複了 ,肯定的,重複就做不出這個效果了。)

不規則切角矩形:

(該圖靈感**於上面的第四步)

這是我在無意研究第四步的background-size時發現的,也算是乙個小聰明吧。

按照上面的步驟,當你把background-size設定成90% 90%時,你就發現上面這個圖形了,其實原理就是,當每個小方塊佔到原圖的90%時,嚴重超出了原本界定的框線,然後就看到了超出的一小部分,其實更多的部分由於重疊在一起了,所以就沒能看出來。

如果我們把每個填充的方向分開來看,也許你就瞬間秒懂了:

在比如說我們給每個方向的漸變調整下顏色:

(然後呢就看到了,其實是因為太大重疊在一起,超出邊界而產生的)

實際上,也就是使其超出一點,剛好合適,就實現了上面的不規則切角矩形了。

深入學習CSS

什麼是css?在之前的這篇文章中已經介紹了初步的介紹,詳細請看 div加css進一步講解了css中的內容,先總結如下圖 其實在實際開發中,我們通常採用是外部樣式的匯入,這樣做的好處是對於很對有同樣設計樣式的頁面可以實現樣式的共享,這樣我們不僅僅可以節省了大量的時間,並且也方便我們可以靈活的呼叫的樣式...

深入學習之http

http協議是無狀態的,指的是協議對於事務處理沒有記憶能力,伺服器不知道客戶端是什麼狀態。也就是說,開啟乙個伺服器上的網頁和你之前開啟這個伺服器上的網頁之間沒有任何聯絡。http是乙個無狀態的面向連線的協議,無狀態不代表http不能保持tcp連線,更不能代表http使用的是udp協議 無連線 從 h...

深入學習之淺拷貝

let foo let bar object.assign bar,foo foo.a foo.a 2 true bar.a 1 true 乍一看,好像已經實現了深拷貝的效果,對foo.a進行的操作並沒有體現在bar.a中,但是再往後看 foo.c.d foo.c.d 2 true bar.c.d ...