利用css實現邊框切角效果

.out-rect {

margin-top: 30px;

display: flex;

align-items: center;

justify-content: center;

width: 200px;

height: 200px;

padding: 5px;

background: linear-gradient(-45deg, transparent 10px, #58a 0) bottom right,

linear-gradient(45deg, transparent 10px, #58a 0) bottom left,

linear-gradient(135deg, transparent 10px, #58a 0) top left,

linear-gradient(-135deg, transparent 10px, #58a 0) top right;   

background-size: 50% 50%;

background-repeat: no-repeat;

.in-rect{

width: 100%;

height: 100%;

background: linear-gradient(-45deg, transparent 8px, #fff 0) bottom right,

linear-gradient(45deg, transparent 8px, #fff 0) bottom left,

linear-gradient(135deg, transparent 8px, #fff 0) top left,

linear-gradient(-135deg, transparent 8px, #fff 0) top right;

background-size: 50% 50%;

background-repeat: no-repeat;

兩個缺角矩形疊加的效果，內部矩形寬高跟隨父div大小，只要保持垂直居中就好，padding的值為最終呈現的邊框的寬度　

在超過乙個切角的效果的時候，就需使用css3的background應用多層背景的特性來完成多重漸變，從而實現多個切角，並且要確保背景不得重複（background-repeat），劃分每個背景的大小（background-size）。

利用角度確定切角形成的角度大小，利用transparent後面的值，確定切角形成的形狀大小，利用left,right, top, bottom確定切角在每乙個切片區的位置。

css實現切角效果

1.乙個切角 思路 如果我們要得到有乙個切角的元素，我們只需要使用乙個徑向漸變就可以達到這個目標，這個漸變需要把乙個透明色標放在切角處，然後再相同的位置設定另乙個色標，並且把它的顏色設定成我們想要的背景色。html div class corner div css corner效果圖 2.兩個切角 ...

《css揭秘》筆記（九），切角效果

假設我們只需要乙個角被切掉的效果，以右下角為例。漸變可以接受乙個角度 45deg 作為方向，而且色標的位置資訊可以是絕對的長度值。因而我們可以用乙個線性漸變就能完成右下角被切掉的效果，只需要把乙個透明色標放在切角處。現在我們想要兩個角被切掉的效果，以底部的兩個角為例，只用一層漸變是不夠的，還需要再加...

CSS邊框效果

本文將詳細介紹css邊框效果 border 10px solid hsla 0,0 100 5 background clip padding box outline 1px white dashed outline offset 10px border radius 4 background 79...