背景样式实现示例-持续收集中
在前端开发过程中,有些绚丽的背景样式,是可以通过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:分别设置四个方向上的背景边框的宽高