css中border边框纹理,8个CSS实现的纹理图案

最新推荐文章于 2024-12-30 10:25:22 发布

涌馨

最新推荐文章于 2024-12-30 10:25:22 发布

阅读量498

点赞数

文章标签： css中border边框纹理

本文介绍使用CSS实现多种复杂的背景渐变效果，包括线性渐变和径向渐变等，展示了不同角度、透明度及图案组合的应用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

语言：

CSSSCSS

确定

html,

body {

margin: 0;

padding: 0;

height: 100%;

}

body {

display: flex;

flex-wrap: wrap;

justify-content: center;

align-items: stretch;

}

.box {

flex: 1 1 auto;

}

.one {

background: repeating-linear-gradient(45deg, #FFE11A, #FFE11A 50%, #FD7400 50%, #FD7400);

background-size: 20px 20px;

}

.two {

background-image: repeating-linear-gradient(45deg, #004C66, #004C66 1em, #008C74 1em, #008C74 50%);

background-size: 2em 2em;

}

.three {

background-image: repeating-linear-gradient(45deg, transparent, transparent 1em, #731630 1em, #731630 50%), repeating-linear-gradient(45deg, #40152A, #40152A 1em, #FF5434 1em, #FF5434 50%);

background-size: 3em 3em, 2em 2em;

}

.four {

background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, #9E2053 1em, #9E2053 50%), repeating-linear-gradient(45deg, #111626, #111626 1em, #571B3D 1em, #571B3D 50%);

background-size: 3em 3em, 2em 2em;

}

.five {

background: repeating-linear-gradient(10deg, #009393, #009393 50%, #00585F 50%, #00585F);

background-size: 100% 2em;

}

.six {

background-image: radial-gradient(ellipse farthest-corner at 2em 2em, #ff9e9d, #ff9e9d 50%, #ff3d7f 50%);

background-size: 2em 2em;

}

.seven {

background-image: radial-gradient(ellipse 4em 4em, #bedb39, #bedb39 25%, #1f8a70 25%);

background-size: 2em 2em;

}

.eight {

background-image: radial-gradient(ellipse 100% 100%, #013440, #013440 25%, rgba(0, 0, 0, 0) 25%), radial-gradient(ellipse 50% 50%, #ab1a25, #ab1a25 25%, #002635 25%);

background-size: 1em 1em, 2em 2em;

}