css布局实现网格背景效果代码
代码语言:html
所属分类:背景
代码描述:css布局实现网格背景效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网格背景</title> <style> :root{ --gridSizeXu:20px; /* 虚线网格大小 */ --gridSizeShi:60px; /* 虚线网格大小 */ --gridColor:#5f5f5f; /* 线条颜色 */ } body{ height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; } /* 虚线部分 */ .grid-xu{ overflow: hidden; width: 100%; height: 100%; position: fixed; z-index: -2; transform: scale(1.1); } .grid-xu::before, .grid-xu::after{ opacity: .5; content: ''; background-repeat: repeat; position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .grid-xu::before{ /* 从左往右 */ background: linear-gradient(to right,white 1px,transparent 1px), linear-gradient(to bottom,var(--gridColor) .5px,transparent .5px); background-size: 3px var(--gridSizeXu); } .grid-xu::after{ /* 从上往下 */ background: linear-gradient(to bottom,white 1px,transparent 1px), linear-gradient(to right,var(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0