css 好看的蒙版 配色,CSS蒙版中带有渐变的花式角

css

:root {

font-size: 14px;

}

BODY {

min-height: 100vh;

display: -webkit-box;

display: flex;

-webkit-box-align: center;

align-items: center;

-webkit-box-pack: center;

justify-content: center;

flex-wrap: wrap;

background: #FFF;

background-image: -webkit-gradient(linear, left top, right top, color-stop(10%, rgba(128, 255, 213, 0.5)), color-stop(0, transparent));

background-image: linear-gradient(to right, rgba(128, 255, 213, 0.5) 10%, transparent 0);

background-size: .5rem 100%;

font: 1rem/1.4 Trebouchet MS, sans-serif;

}

P {

margin: 0;

}

P + P {

margin-top: 2rem;

}

.wrapper {

display: grid;

grid-template-columns: 1fr 1fr;

grid-gap: 2rem;

max-width: 70vw;

margin: 2rem;

}

.corners {

min-height: 75px;

padding: 2.25rem;

background: -webkit-gradient(linear, left top, left bottom, from(darkturquoise), to(aquamarine));

background: linear-gradient(darkturquoise, aquamarine);

}

.corners--round {

-webkit-mask-image: radial-gradient(circle at 1.5rem 1.5rem, transparent 1.5rem, gold 0);

mask-image: radial-gradient(circle at 1.5rem 1.5rem, transparent 1.5rem, gold 0);

-webkit-mask-position: -1.5rem -1.5rem;

mask-position: -1.5rem -1.5rem;

-webkit-mask-repeat: repeat;

mask-repeat: repeat;

}

.corners--slanted {

-webkit-mask-image: linear-gradient(135deg, transparent 1.15rem, gold 0), linear-gradient(-135deg, transparent 1.15rem, gold 0), linear-gradient(45deg, transparent 1.15rem, gold 0), linear-gradient(-45deg, transparent 1.15rem, gold 0);

mask-image: linear-gradient(135deg, transparent 1.15rem, gold 0), linear-gradient(-135deg, transparent 1.15rem, gold 0), linear-gradient(45deg, transparent 1.15rem, gold 0), linear-gradient(-45deg, transparent 1.15rem, gold 0);

-webkit-mask-position: 0 0, 100% 0, 0 100%, 100% 100%;

mask-position: 0 0, 100% 0, 0 100%, 100% 100%;

-webkit-mask-repeat: no-repeat;

mask-repeat: no-repeat;

-webkit-mask-size: 51% 51%;

mask-size: 51% 51%;

}

.corners--square {

-webkit-mask-image: conic-gradient(from -90deg at 1.5rem 1.5rem, transparent 0.25turn, gold 0), conic-gradient(from 0deg at calc(100% - 1.5rem) 1.5rem, transparent 0.25turn, gold 0), conic-gradient(from 180deg at 1.5rem calc(100% - 1.5rem), transparent 0.25turn, gold 0), conic-gradient(from 90deg at calc(100% - 1.5rem) calc(100% - 1.5rem), transparent 0.25turn, gold 0);

mask-image: conic-gradient(from -90deg at 1.5rem 1.5rem, transparent 0.25turn, gold 0), conic-gradient(from 0deg at calc(100% - 1.5rem) 1.5rem, transparent 0.25turn, gold 0), conic-gradient(from 180deg at 1.5rem calc(100% - 1.5rem), transparent 0.25turn, gold 0), conic-gradient(from 90deg at calc(100% - 1.5rem) calc(100% - 1.5rem), transparent 0.25turn, gold 0);

-webkit-mask-position: 0 0, 100% 0, 0 100%, 100% 100%;

mask-position: 0 0, 100% 0, 0 100%, 100% 100%;

-webkit-mask-repeat: no-repeat;

mask-repeat: no-repeat;

-webkit-mask-size: 51% 51%;

mask-size: 51% 51%;

}

.corners--conic {

--step: calc(30% / 8.25);

-webkit-mask-image: conic-gradient(from -90deg at 1.5rem 1.5rem, transparent var(--step), gold 0, gold calc(var(--step) * 2), transparent 0, transparent calc(var(--step) * 3), gold 0, gold calc(var(--step) * 4), transparent 0, transparent calc(var(--step) * 5), gold 0, gold calc(var(--step) * 6), transparent 0, transparent calc(var(--step) * 7), gold 0, gold calc(var(--step) * 8)), conic-gradient(from 0deg at calc(100% - 1.5rem) 1.5rem, transparent var(--step), gold 0, gold calc(var(--step) * 2), transparent 0, transparent calc(var(--step) * 3), gold 0, gold calc(var(--step) * 4), transparent 0, transparent calc(var(--step) * 5), gold 0, gold calc(var(--step) * 6), transparent 0, transparent calc(var(--step) * 7), gold 0, gold calc(var(--step) * 8)), conic-gradient(from 180deg at 1.5rem calc(100% - 1.5rem), transparent var(--step), gold 0, gold calc(var(--step) * 2), transparent 0, transparent calc(var(--step) * 3), gold 0, gold calc(var(--step) * 4), transparent 0, transparent calc(var(--step) * 5), gold 0, gold calc(var(--step) * 6), transparent 0, transparent calc(var(--step) * 7), gold 0, gold calc(var(--step) * 8)), conic-gradient(from 90deg at calc(100% - 1.5rem) calc(100% - 1.5rem), transparent var(--step), gold 0, gold calc(var(--step) * 2), transparent 0, transparent calc(var(--step) * 3), gold 0, gold calc(var(--step) * 4), transparent 0, transparent calc(var(--step) * 5), gold 0, gold calc(var(--step) * 6), transparent 0, transparent calc(var(--step) * 7), gold 0, gold calc(var(--step) * 8));

mask-image: conic-gradient(from -90deg at 1.5rem 1.5rem, transparent var(--step), gold 0, gold calc(var(--step) * 2), transparent 0, transparent calc(var(--step) * 3), gold 0, gold calc(var(--step) * 4), transparent 0, transparent calc(var(--step) * 5), gold 0, gold calc(var(--step) * 6), transparent 0, transparent calc(var(--step) * 7), gold 0, gold calc(var(--step) * 8)), conic-gradient(from 0deg at calc(100% - 1.5rem) 1.5rem, transparent var(--step), gold 0, gold calc(var(--step) * 2), transparent 0, transparent calc(var(--step) * 3), gold 0, gold calc(var(--step) * 4), transparent 0, transparent calc(var(--step) * 5), gold 0, gold calc(var(--step) * 6), transparent 0, transparent calc(var(--step) * 7), gold 0, gold calc(var(--step) * 8)), conic-gradient(from 180deg at 1.5rem calc(100% - 1.5rem), transparent var(--step), gold 0, gold calc(var(--step) * 2), transparent 0, transparent calc(var(--step) * 3), gold 0, gold calc(var(--step) * 4), transparent 0, transparent calc(var(--step) * 5), gold 0, gold calc(var(--step) * 6), transparent 0, transparent calc(var(--step) * 7), gold 0, gold calc(var(--step) * 8)), conic-gradient(from 90deg at calc(100% - 1.5rem) calc(100% - 1.5rem), transparent var(--step), gold 0, gold calc(var(--step) * 2), transparent 0, transparent calc(var(--step) * 3), gold 0, gold calc(var(--step) * 4), transparent 0, transparent calc(var(--step) * 5), gold 0, gold calc(var(--step) * 6), transparent 0, transparent calc(var(--step) * 7), gold 0, gold calc(var(--step) * 8));

-webkit-mask-size: 51% 51%;

mask-size: 51% 51%;

-webkit-mask-position: 0 0, 100% 0, 0 100%, 100% 100%;

mask-position: 0 0, 100% 0, 0 100%, 100% 100%;

-webkit-mask-repeat: no-repeat;

mask-repeat: no-repeat;

border-radius: 1.5rem;

}

.corners--repeated-lines {

-webkit-mask-image: linear-gradient(135deg, transparent 1.25rem, gold 0), linear-gradient(-135deg, transparent 0.5rem, gold 0, gold 0.75rem, transparent 0, transparent 1rem, gold 0, gold 1.25rem, transparent 0, transparent 1.5rem, gold 0), linear-gradient(45deg, transparent 0.5rem, gold 0, gold 0.75rem, transparent 0, transparent 1rem, gold 0, gold 1.25rem, transparent 0, transparent 1.5rem, gold 0), linear-gradient(-45deg, transparent 1.25rem, gold 0);

mask-image: linear-gradient(135deg, transparent 1.25rem, gold 0), linear-gradient(-135deg, transparent 0.5rem, gold 0, gold 0.75rem, transparent 0, transparent 1rem, gold 0, gold 1.25rem, transparent 0, transparent 1.5rem, gold 0), linear-gradient(45deg, transparent 0.5rem, gold 0, gold 0.75rem, transparent 0, transparent 1rem, gold 0, gold 1.25rem, transparent 0, transparent 1.5rem, gold 0), linear-gradient(-45deg, transparent 1.25rem, gold 0);

-webkit-mask-position: 0 0, 100% 0, 0 100%, 100% 100%;

mask-position: 0 0, 100% 0, 0 100%, 100% 100%;

-webkit-mask-repeat: no-repeat;

mask-repeat: no-repeat;

-webkit-mask-size: 51% 51%;

mask-size: 51% 51%;

}

.corners--repeated-circles {

-webkit-mask-image: radial-gradient(circle at 1.5rem 1.5rem, transparent 0, transparent 1rem, gold 0, gold 1.25rem, transparent 0, transparent 1.5rem, gold 0);

mask-image: radial-gradient(circle at 1.5rem 1.5rem, transparent 0, transparent 1rem, gold 0, gold 1.25rem, transparent 0, transparent 1.5rem, gold 0);

-webkit-mask-position: -1.5rem -1.5rem;

mask-position: -1.5rem -1.5rem;

-webkit-mask-repeat: repeat;

mask-repeat: repeat;

}