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

最新推荐文章于 2024-07-23 14:07:14 发布
最新推荐文章于 2024-07-23 14:07:14 发布
阅读量187 收藏
点赞数
分类专栏： 基础 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/janfiveee_/article/details/121768291
版权

在这里插入图片描述
如果想背景的网格大小统一，不被拉伸，不变形，建议自己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;
Janfiveee_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS - 网格布局（grid）
伏城之外的博客
07-20 6855
网格布局、grid、表格布局、二维布局、网格轨道、grid-template-rows、grid-template-columns、grid-template、fr单位、min-content、max-content、minmax、auto-fill、auto-fit、网格单元、网格项目、网格线、grid-row、grid-column、grid-area、网格区域、grid-template-area、网格间距、gap、显示网格、隐式网格、稀疏包装、密集包装、网格单元对齐、网格项目对齐、统一对齐、单独对齐
CSS-Grid网格布局笔记
学习，思考，输出
07-11 2050
显示网格：是指item在定义单元格范围内，比如一行三列的布局，若item在这布局中就是显示单元格，不在则为隐式单元格。前提是容器的子元素超过了网络布局定义范围，比如一行三列的布局，正常是三个元素，但隐式单元格就是超过了三个元素。单元格列数跟随容器宽度自适应，宽度最小不会小于100px，行数是一个隐式单元格属性，会自动适应容器大小。上面没有给网格布局设置宽度与高度，以及网格的列数、行数，都是跟随元素和分辨率自动调节网格的列数、行数。默认子元素都是独占一个单元格的，如果要进行合并单元格，除了前面提到的用。
2021- css-doodle
itwangyang520的博客
10-24 329
css-doodle 一、 入门 1. 安装 1.1. 直接下最新版本或直接从 CDN ： <script src = "https://unpkg.com/css-doodle@0.19.2/css-doodle.min.js" ></script> <css-doodle > /* 把你的代码放在这里 */ </css-doodle> 1.2. npm 或者 yarn导入 yarn add css-doodle # or npm install c
CSS 布局 - grid - 二维布局方法 - 网格布局
Muxiu
06-08 1506
采用网格布局的区域，称为"容器"（）。容器内部采用网格定位的子元素，称为"项目"（）。和 flex 布局 一样的布局概念 —— 容器容纳项目元素既然是二维的，那么就应该对直角坐标系有所认知，容器里面的水平区域称为"行"（），垂直区域称为"列"（）。这样构成了一个二维坐标，这个坐标就是项目元素在容器内的坐标地点。但是这里不是单单指坐标点，因为是一个四边形，所以会有一个对角坐标，也就是说会有两个 轴 两个 轴，那么由此包围起来的，就是一个项目元素。行和列的交叉区域，称为"单元格"（）。正常情况下，行和列会产
《CSS3》田字网格背景（外实线内虚线）的实现
Oliver尹的博客
01-30 918
记录一些有趣的CSS实现方式，总所周知，当一段效果可以通过CSS实现的时候，绝不使用Javascript来实现，因此记录一些有意思的CSS效果，一来是方便自己学习，另一来是方便以后在需要使用到的时候能快速找到并使用上~耐心看完，你也许有所收获～
gird 网格布局 css justify-content属性 不生效问题
weixin_45419943的博客
09-18 1608
gird 网格布局 css justify-content属性 不生效问题 这里我写了一个vue 的for循环为例，供兄台们参考 <view class="use-content-list"> <view class="use-list-item" v-for="(item, index) in printingUseList" :key="item.id" @tap="printingUseRadio(item.id, index)"> <view :class="[
css-grid布局
grow_的博客
03-14 560
目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。
css【详解】grid布局—— 网格布局（栅格布局）
热门推荐
朝阳39的博客
04-11 4万+
目录 gird布局 和 flex布局的区别 Grid 布局的基本术语 网格布局的使用方法 启用网格布局display: grid 划分列grid-template-columns 绝对值 px 百分比值 % 比例值 fr auto值 minmax()函数值 repeat()函数值 划分行grid-template-rows 自动填充auto-fill 给网格线命名 [] 设置行/列的间距 指定区域 不属于任何区域的单元格，用.表示 多个单元格合并成一个区域 改...
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 775
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
CSS3网格的三个新特性详解
12-10
CSS3网格系统是现代网页设计中的重要组成部分，它极大地提升了布局的灵活性和可维护性。在本文中，我们将深入探讨CSS3网格的三个关键新特性，它们为解决多列布局和响应式设计提供了强大工具。 首先，我们来看一下...
Chrome的hack写法以及CSS的支持程度图示
10-30
### Chrome的Hack写法及CSS支持程度解析 #### 一、Chrome Hack写法概述 在Web开发中，由于不同浏览器对CSS的支持程度不一，开发者往往需要针对特定浏览器编写特定的样式来确保网页在各种环境下的一致性显示效果。...
div css教程TOP排行榜或新闻列表最标准div css样式表代码写法
11-04
- **网格布局**：利用 `display: grid` 或 `display: flex` 可以创建灵活的网格系统，适应不同屏幕尺寸。例如，可以设置 `grid-template-columns` 来定义列数，或者用 `flex-wrap` 控制元素是否换行。 4. **样式...
Sass-Shorts-Helpers
03-09
【Sass-Shorts-Helpers】是一个专注于CSS预处理器Sass的工具集合，它提供了一系列实用的函数和混合（mixins）来简化CSS编写过程，提高开发效率。Sass是CSS的一个扩展，允许我们使用变量、嵌套规则、混合、继承等功能...
h:project2-final
03-31
通过使用CSS，我们可以控制元素的颜色、字体、布局、间距、背景以及响应式设计等多个方面，从而实现丰富的视觉效果。 首先，CSS的基本语法包括选择器和声明。选择器是用于指定要应用样式规则的HTML元素，如`p`代表...
css class 多种规则判断样式
Little___Turtle的博客
07-22 274
商品分类选择变量 上下的分类需要添加圆角 这个就设计到多个分类的判断。
CSS进阶探索：动画与过渡效果
2301_79375313的博客
07-23 443
在掌握了CSS的基础知识后，进一步探索CSS的动画与过渡效果，可以让你的网页更加生动有趣。动画和过渡不仅可以增强用户的视觉体验，还能有效传达信息，提升交互的流畅性。本文将带你深入了解CSS动画与过渡的奥秘，让你的网页设计更上一层楼。
CSS学习笔记
最新发布
ngczx的博客
07-23 429
CSS学习笔记
CSS Text(文本)
lly202406的博客
07-23 466
CSS中文本属性非常丰富，通过合理运用这些属性，可以创造出各种美观、实用的文本效果。希望本文能帮助您更好地掌握CSS文本属性的使用方法。
Css 网格布局 grid-template-areas
11-17
`grid-template-areas`属性是CSS网格布局中用于定义网格模板的属性。它允许我们通过指定网格区域的名称来创建一个网格模板，从而更轻松地布局网格项。以下是一个例子： ```css .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-template-areas: "header header header" "main main sidebar" "footer footer footer"; } .header { grid-area: header; } .main { grid-area: main; } .sidebar { grid-area: sidebar; } .footer { grid-area: footer; } ``` 在这个例子中，我们定义了一个包含3行和3列的网格，其中第一行是标题，第二行是主要内容和侧边栏，第三行是页脚。我们使用`grid-template-areas`属性来指定每个网格区域的名称，并将它们放在一个网格模板中。然后，我们使用`grid-area`属性将每个网格项放置在相应的网格区域中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值