|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
CSS設(shè)置邊框虛線大小、顏色等樣式【示例】
作者:admin 時(shí)間:2022-8-12 14:43:51 瀏覽:CSS邊框樣式可以設(shè)置邊框?yàn)樘摼€，默認(rèn)的虛線顯示為一系列短的方形線段。
其CSS為
border-style: dashed;
如果你突發(fā)奇想，想自定義虛線樣式，例如改變其大小、顏色等屬性，那么要怎樣做呢？這正是本文要介紹的內(nèi)容。
本文實(shí)例實(shí)現(xiàn)的效果圖如下。
實(shí)例介紹
圖片邊框?yàn)橐粭l彩色虛線，當(dāng)鼠標(biāo)移到圖片上時(shí)，虛線可縮小放大。
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
img {
--b: 5px; /* 邊寬 */
--s: 30px; /* 虛線大小 */
--g: 20px; /* 邊距 */
--c1: #215A6D;
--c2: #92C7A3;
--_g: calc(var(--g) - 1em);
padding: calc(var(--b) + var(--_g));
background:
repeating-conic-gradient(var(--c1) 0 25%,var(--c2) 0 50%)
0 0/var(--s) var(--s) round;
--_p: calc(100% - var(--_g) - 2*var(--b));
--_m:
conic-gradient(from 90deg at var(--b) var(--b),#0000 25%,#000 0)
0 0/calc(100% - var(--b)) calc(100% - var(--b)),
conic-gradient(from 90deg at var(--_g) var(--_g) ,#000 25%,#0000 0)
var(--b) var(--b)/var(--_p) var(--_p);
-webkit-mask: var(--_m);
mask: var(--_m);
cursor: pointer;
transition: .4s;
font-size: 0;
}
img:hover {
font-size: calc(var(--g)/2);
margin: calc(var(--g)/2)
}
body {
margin: 0;
min-height: 100vh;
display: grid;
grid-auto-flow: column;
gap: 20px;
place-content: center;
place-items: center;
background: #C6A49A;
}
</style>
</head>
<body>
<img src="pic-1.jpg">
<img src="pic-2.jpg" style="--g: 26px;--s: 40px;--b: 7px;--c1:#C02942;--c2:#542437;">
</body>
</html>
代碼分析
圖片樣式img使用了幾個(gè)變量：--b、--s、--g，其中 --b表示邊寬，--s表示虛線大小，--g表示邊距。
calc() 函數(shù)用一個(gè)表達(dá)式作為它的參數(shù)，用這個(gè)表達(dá)式的結(jié)果作為值。這個(gè)表達(dá)式可以是任何操作符加減乘除（+、-、*、/）的組合，采用標(biāo)準(zhǔn)操作符處理法則的簡(jiǎn)單表達(dá)式。
repeating-conic-gradient() 具有定義的顏色開始和顏色停止的重復(fù)圓錐漸變。
相關(guān)文章
標(biāo)簽: 虛線
相關(guān)文章
x
- 站長(zhǎng)推薦
