【无标题】

楼兰逸梦

已于 2024-06-06 10:54:04 修改

阅读量325

点赞数 5

文章标签：前端 css

于 2024-06-06 10:53:09 首次发布

本文链接：https://blog.csdn.net/wlz555/article/details/139493690

版权

背景样式实现示例-持续收集中

在前端开发过程中，有些绚丽的背景样式，是可以通过css样式实现而非用背景图片来实现，css代码实现效果更好，性能更佳，而且实现简单，值得收集一波！

给背景添加边框

如图：在这里插入图片描述
样式代码：
`

-css样式

{
width: 880px;
height: 397px;
background: linear-gradient(to left, #003BCF, #003BCF) left top no-repeat, linear-gradient(to bottom, #003BCF, #003BCF) left top no-repeat, linear-gradient(to left, #003BCF, #003BCF) right top no-repeat, linear-gradient(to bottom, #003BCF, #003BCF) right top no-repeat, linear-gradient(to left, #003BCF, #003BCF) left bottom no-repeat, linear-gradient(to bottom, #003BCF, #003BCF) left bottom no-repeat, linear-gradient(to left, #003BCF, #003BCF) right bottom no-repeat, linear-gradient(to left, #003BCF, #003BCF) right bottom no-repeat;
background-size: 2px 10px, 10px 2px, 2px 10px, 10px 2px;
background-color: #0B0F2A;
margin-top: 12px;
margin-bottom: 12px;
margin-left: 10px;
position: relative;
}`

核心样式属性：background background-size background-color
background-size:分别设置四个方向上的背景边框的宽高