2021-12-07 css网格背景的写法

最新推荐文章于 2025-03-19 13:42:47 发布

原创最新推荐文章于 2025-03-19 13:42:47 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

基础专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何通过CSS来创建一个不会被拉伸或变形的固定大小背景网格。建议避免依赖UI出图，而是直接使用CSS代码实现。示例代码展示了如何利用box-shadow和linear-gradient属性创建48px*48px的透明至半透明的网格，并通过background-size属性保持网格大小一致。

在这里插入图片描述
如果想背景的网格大小统一，不被拉伸，不变形，建议自己css手写，不要让ui出图

写法：

 box-shadow: 0 0 0 10px #5E89FF;
      background: -webkit-linear-gradient(top, transparent 47px, rgba(255, 255, 255, .08) 48px), -webkit-linear-gradient(left, transparent 47px, rgba(255, 255, 255, .08) 48px);
      background: -moz-linear-gradient(top, transparent 47px, rgba(255, 255, 255, .08) 48px), -moz-linear-gradient(left, transparent 47px, rgba(255, 255, 255, .08) 48px);
      background: -o-linear-gradient(top, transparent 47px, rgba(255, 255, 255, .08) 48px), -o-linear-gradient(left, transparent 47px, rgba(255, 255, 255, .08) 48px);
      background: -ms-linear-gradient(top, transparent 47px, rgba(255, 255, 255, .08) 48px), -ms-linear-gradient(left, transparent 47px, rgba(255, 255, 255, .08) 48px);
      background: linear-gradient(top, transparent 47px, rgba(255, 255, 255, .08) 48px), linear-gradient(left, transparent 47px, rgba(255, 255, 255, .08) 48px);
      background-size: 48px 48px;
      background-color: #3769F5;