CSS實現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變效果
我要評論單純用css實現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變所有效果，因為UI沒給背景切圖，尋思這個理論上用css就能實現(xiàn)。
看一下最終要實現(xiàn)的效果：
首先不談內(nèi)容紫藍色漸變，一個單純的四切角+黑色邊框+輪廓投影，其實就直接用網(wǎng)上鋪天蓋地的background:linear-gradient 實現(xiàn)切角+ 套一層小了1px的偽元素實現(xiàn)邊框 + filter: box-shadow實現(xiàn)投影就行了，效果和代碼如下：
<html>
<body>
<div class="box"></div>
</body>
<style>
body {
background-color: #55486b;
}
.box {
margin: 20px;
width: 200px;
height: 200px;
z-index: 0;
background: linear-gradient(
135deg,
transparent calc(10px + 1 * 0.414px),
#18121a 0
)
top left,
linear-gradient(
-135deg,
transparent calc(10px + 1 * 0.414px),
#18121a 0
)
top right,
linear-gradient(-45deg, transparent calc(10px + 1 * 0.414px), #18121a 0)
bottom right,
linear-gradient(45deg, transparent calc(10px + 1 * 0.414px), #18121a 0)
bottom left;
background-size: 55% 50%;
background-repeat: no-repeat;
position: relative;
filter: drop-shadow(1px 1px 2px rgba(255, 255, 255, 0.3));
}
.box::after {
z-index: 1;
width: calc(100% - 2 * 1px);
height: calc(100% - 2 * 1px);
content: "";
display: block;
background: linear-gradient(135deg, transparent 10px, #3c2f4f 0) top left,
linear-gradient(-135deg, transparent 10px, #3c2f4f 0) top right,
linear-gradient(-45deg, transparent 10px, #3c2f4f 0) bottom right,
linear-gradient(45deg, transparent 10px, #3c2f4f 0) bottom left;
background-size: 55% 51%;
background-repeat: no-repeat;
position: absolute;
left: 1px;
top: 1px;
}
</style>
</html>
相當于四個角斜方向用一小段透明色+一大段背景色拼湊起來實現(xiàn)的切角，background-size要大于50%以免有白色線bug。大的div里再套一層小的偽元素實現(xiàn)邊框。但由于是四塊背景色拼起來的，所以要實現(xiàn)整個內(nèi)容漸變看起來不可能了。
要實現(xiàn)內(nèi)容區(qū)域也是漸變的，那么換種思路，之間里面那層偽元素background是漸變的，四個切角通過其他屬性來切掉，這樣就有其他的實現(xiàn)方法了，先來看看：
方法一：mask遮罩
其他東西不變，之前偽元素那塊是和外層一樣的思路實現(xiàn)切角，這種思路下是無法做到垂直漸變的（因為切角已經(jīng)是通過斜對角透明色漸變做的），那么直接把背景色寫成漸變，通過mask遮罩屬性來將四個切角變透明：
.box::after {
z-index: 1;
width: calc(100% - 2 * 1px);
height: calc(100% - 2 * 1px);
content: "";
display: block;
background: linear-gradient(180deg, #3c2f4f, #2e2269);
-webkit-mask: linear-gradient(135deg, transparent 10px, #3c2f4f 0) top
left,
linear-gradient(-135deg, transparent 10px, #3c2f4f 0) top right,
linear-gradient(-45deg, transparent 10px, #3c2f4f 0) bottom right,
linear-gradient(45deg, transparent 10px, #3c2f4f 0) bottom left;
-webkit-mask-size: 55% 51%;
-webkit-mask-repeat: no-repeat;
position: absolute;
left: 1px;
top: 1px;
}
稍許更改一下上面的代碼里偽元素的樣式，就實現(xiàn)了。
方法二：clip-path
clip-path屬性可以直接修剪掉元素周圍的邊界，如果直接運用在上面?zhèn)卧?，會發(fā)現(xiàn)投影也被遮蓋了，那么換個思路，我們索性不要偽元素那一層，直接把div修剪出4個切角。因為filter屬性可以疊加，將其父元素添加filter，前n+1個drop-shadow疊加起來形成一個類似黑色邊框，最后一個drop-shadow來實現(xiàn)淺白色投影。效果如下：
<html>
<body>
<div class="outer">
<div class="box"></div>
</div>
</body>
<style>
body {
background-color: #55486b;
}
.outer {
filter: drop-shadow(0px 0px 1px #18121a) drop-shadow(0px 0px 1px #18121a)
drop-shadow(0px 0px 1px #18121a)
drop-shadow(2px 1px 3px rgba(255, 255, 255, 0.3));
}
.box {
margin: 20px;
width: 200px;
height: 200px;
border-radius: 12px;
position: relative;
background: linear-gradient(180deg, #3c2f4f, #2e2269);
-webkit-clip-path: polygon(
20px 0%,
calc(100% - 20px) 0%,
100% 20px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
20px 100%,
0 calc(100% - 20px),
0 20px
);
clip-path: polygon(
20px 0%,
calc(100% - 20px) 0%,
100% 20px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
20px 100%,
0 calc(100% - 20px),
0 20px
);
position: relative;
}
</style>
</html>
不知道還有沒有更簡單且兼容性更好的方法~~~~
到此這篇關(guān)于CSS實現(xiàn)切角+邊框+投影+內(nèi)容背景色漸變效果的文章就介紹到這了,更多相關(guān)css背景色漸變內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章給大家介紹了如何使用CSS實現(xiàn)漸變圓角邊框的效果，有沒有發(fā)現(xiàn)在現(xiàn)如今的網(wǎng)站應用中，我們大量的使用到這類場景,在解決這類問題時，我們利用了css的mask與mask-comp2023-10-12
今天給大家分享一個使用CSS實現(xiàn)簡單的邊框流光效果，就像和夜晚街上的廣告牌很像，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的2023-09-14
今天給大伙帶來的是一個鋸齒形邊框，類似于傳統(tǒng)郵票的邊框，有一圈鋸齒形狀，其實看到這種效果，相信很多人第一反應是采用偽元素的方式添加小三角形來實現(xiàn)鋸齒狀，確實是這2023-09-08
本文通過代碼給大家介紹css背景和邊框標簽的一些知識，通過相關(guān)屬性設(shè)置背景顏色，背景圖像，對css背景與邊框的相關(guān)知識感興趣的朋友一起看看吧2021-05-21
這篇文章主要介紹了css 中多種邊框的實現(xiàn)小竅門,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習2021-04-07- 邊框流動效果是一種很酷的效果，可以為網(wǎng)頁增添一些動感和活力，本文就來介紹一下css實現(xiàn)邊框流動的項目實踐，具有一定的參考價值，感興趣的可以了解一下2024-02-01
