假設我們只需要乙個角被切掉的效果，以右下角為例。漸變可以接受乙個角度（45deg）作為方向，而且色標的位置資訊可以是絕對的長度值。因而我們可以用乙個線性漸變就能完成右下角被切掉的效果，只需要把乙個透明色標放在切角處。
現在我們想要兩個角被切掉的效果，以底部的兩個角為例，只用一層漸變是不夠的，還需要再加一層。
.box2
所以我們用background-size使兩層漸變分開。
然後這依然不是想要的效果，原因在於background預設是repeat的，需要把background-repeat設定成no-repeat。
如果我們想要四個角都被切掉的效果，就可以用四層漸變：
上述漸變還有乙個變種，可以用來建立弧形切角（也叫「內凹圓角」）。我們使用徑向漸變來達到這種效果：
可以使用clip-path將乙個元素切出20px大小（以水平方向度量）的斜面切角：
這個方案的不足在於，它會連容器中的文字一併裁切掉，如上圖所示。
css實現切角效果
1.乙個切角 思路 如果我們要得到有乙個切角的元素，我們只需要使用乙個徑向漸變就可以達到這個目標，這個漸變需要把乙個透明色標放在切角處，然後再相同的位置設定另乙個色標，並且把它的顏色設定成我們想要的背景色。html div class corner div css corner效果圖 2.兩個切角 ...
利用css實現邊框切角效果
out rect margin top 30px display flex align items center justify content center width 200px height 200px padding 5px background linear gradient 45deg,...
《css揭秘》筆記（十三），染色效果
染色效果，為一幅灰度 或是被轉換為灰度模式的彩色 新增染色效果，可以為不同風格的額 帶來視覺上的一致性。sepia 降低飽和度的橙黃色染色效果，幾乎畫素的色相值會被收斂到35 40.使用saturate 濾鏡可以給畫素提公升飽和度，具體飽和度取決於實際情況。hue rotate濾鏡可以為每個畫素的色...