CSS的常用方式 - 随笔分类 - MrSlow

微信小程序：多行文本溢出出现多余的文字

摘要：多行文本溢出隐藏css样式 .line-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /*限制文本行数*/ -webkit-box-orient: vertica 阅读全文

posted @ 2023-02-11 15:44 MrSlow 阅读(377) 评论(0) 推荐(0)

记录Sass的一些用法

摘要：Sass变量的定义(永远不要使用@extend!) $fontSize:12px; body{ font-size:$fontSize; } 特殊变量：如果变量嵌套在字符串中，则需要写在 #{} 符号里面，如： $top:top; div{ margin-#{$top}:10px } 变量的调用 . 阅读全文

posted @ 2022-01-08 11:25 MrSlow 阅读(114) 评论(0) 推荐(0)

css特效实现透明渐变

摘要：知乎发现栏目上的标题图一般都是以下图方式展现的，很显然它是利用渐变去实现的。思路很有意思，主要是要有两方面的认知：这张图其实可以分成两部分，右边控制图形和渐变，左边就是一张纯色背景，和渐变无关透明transparent也是一种颜色，也是渐变可以设置的 HTML <body> <div class 阅读全文

posted @ 2021-07-09 10:06 MrSlow 阅读(438) 评论(0) 推荐(0)

利用CSS完美解决前端图片变形问题

摘要：这里就要隆重推出：object-fit和object-position。你可以这么理解，object-position相当于background-position，它的默认值是50% 50%，也就是居中，所以一般不写，加了object-fit，默认就居中了。而object-fit，相当于backgr 阅读全文

posted @ 2021-07-09 09:58 MrSlow 阅读(492) 评论(0) 推荐(0)

CSS属性：vertical-align:middle,设置为什么无效！

摘要：这是为什么呢！所以查找了许多资料，原来vertical-align属性只对行内元素有效，对块内元素无效！而此时就会用到display属性，大家也看到我里面有设置display属性为inline-block属性，确没有效果，那是因为将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被阅读全文

posted @ 2021-07-09 09:51 MrSlow 阅读(1074) 评论(0) 推荐(0)

CSS选择器

摘要：如果我想选择包含 a.active 的 li 该怎么实现呢？目前我们学到的CSS好像是没有办法的，不过今天要将的一个CSS伪类 :has() 就有这个功能，虽然还处于草案阶段，但是还是可以提前了解一下。 li:has(> a.active){ color:red; } 除了表示包含，:has 还可阅读全文

posted @ 2021-07-09 09:42 MrSlow 阅读(98) 评论(0) 推荐(0)

css中伪元素before或after中content的特殊用法attr

摘要：html代码： 前 端 博</s 阅读全文

posted @ 2021-07-09 09:29 MrSlow 阅读(348) 评论(0) 推荐(0)

css3中transform属性实现的4种功能

摘要：transform属性在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。（1）浏览器支持到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。 2旋转使用rotate方法，在参数阅读全文

posted @ 2021-07-09 09:20 MrSlow 阅读(306) 评论(0) 推荐(0)

网格布局（grid）常用属性

摘要：flex布局不同的是，网格布局（grid）是一个二维的布局，可以创建任意行列的布局。首先来介绍几个概念;想象一个三行三列的布局，网格线就是构成网格所有的线条，三行三列的布局每行就会有4条网格线。网格轨道就是相邻两条平行的网格线之间的部分。和flex布局一样，他会有父容器和子项目，在这儿我们称为网格容阅读全文

posted @ 2021-07-08 14:07 MrSlow 阅读(1546) 评论(0) 推荐(0)

MrSlow

随笔分类 - CSS的常用方式

公告