随笔分类 -  CSS

CSS之filter滤镜属性
摘要：一、问题引入 图片尺寸不固定，根据本身大小，增加黑色遮罩。 方案：1.加上父元素，内容设置fit-content自适应，然后增加遮罩子元素定位；2.考虑直接css的filter滤镜直接实现 二、filter属性 filter属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的 阅读全文
posted @ 2025-03-06 13:54 盼星星盼太阳 阅读(7) 评论(0) 推荐(0) 编辑
CSS实现文字滑动亮光效果
摘要：使用CSS属性，文字背景渐变，结合animation实现滑动亮光 话不多说，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device 阅读全文
posted @ 2024-01-12 15:03 盼星星盼太阳 阅读(118) 评论(0) 推荐(0) 编辑
css之object-fit
摘要：一、object-fit属性 object-fit使用说明 object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。 object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。 二、属性值 .fill { ob 阅读全文
posted @ 2023-12-15 17:03 盼星星盼太阳 阅读(949) 评论(0) 推荐(0) 编辑
css之box-shadow
摘要：一、属性 box-shadow属性可以设置一个或多个下拉阴影的框。 语法： box-shadow: h-shadow v-shadow blur spread color inset; 注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 阅读全文
posted @ 2023-12-15 16:56 盼星星盼太阳 阅读(66) 评论(0) 推荐(0) 编辑
css之backgroud
摘要：一、background background属性是所有背景属性的缩写，通常建议在代码中使用该缩写属性，而不是使用多条单独的背景属性，因为该缩写属性在老版本浏览器中支持性更好，而且书写简便。未写在缩写属性中的其他背景属性，则会采用默认值。 二、属性 共包含9种属性，除了background-blen 阅读全文
posted @ 2023-12-15 16:46 盼星星盼太阳 阅读(130) 评论(0) 推荐(0) 编辑
CSS-transition过渡效果
摘要：一、transition详解 通常当 CSS 的属性值更改后，浏览器会立即更新相应的样式，例如当鼠标悬停在元素上时，通过 :hover 选择器定义的样式会立即应用在元素上。在 CSS3 中加入了一项过渡功能，通过该功能您可以将元素从一种样式在指定时间内平滑的过渡到另一种样式，类似于简单的动画，但无需 阅读全文
posted @ 2023-11-29 16:13 盼星星盼太阳 阅读(48) 评论(0) 推荐(0) 编辑
flex布局space-between最后一行左对齐的方法
摘要：一、问题引入 给最外面的大盒子设置 justify-content: space-between; 如果盒子的个数是1个，3的倍数，或者是3的倍数+1的时候，是正常的。但是当盒子的个不符合刚才所列举的个数。就会出现最后一行中间是空的。如下图: 二、解决办法 方案一、补充个数 通过对数据处理，补充个数 阅读全文
posted @ 2023-11-15 10:10 盼星星盼太阳 阅读(1186) 评论(0) 推荐(0) 编辑
flex布局子元素宽度超出父元素flex1不生效问题
摘要：一、问题引入 最近在做项目中，使用flex布局遇到了个老问题：当flex子元素里的子元素的宽度过大，超出flex父元素时，设置flex:1并不能限制flex子元素的尺寸； 二、解决方案 为什么flex子元素超出容器宽度但不根据 flex-shrink 属性进行收缩?原因是浏览器默认为flex容器的子 阅读全文
posted @ 2023-11-06 17:55 盼星星盼太阳 阅读(2641) 评论(0) 推荐(0) 编辑
CSS 实现鼠标悬浮边框线动画效果研究
摘要：一、transition CSS transition（过渡效果）详解 CSS 中提供了 5 个有关过渡的属性，如下所示： transition-property：设置元素中参与过渡的属性； transition-duration：设置元素过渡的持续时间； transition-timing-fun 阅读全文
posted @ 2023-10-20 16:18 盼星星盼太阳 阅读(336) 评论(0) 推荐(0) 编辑
常用css知识点
摘要：1.文字溢出省略号 文字单行溢出: overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 溢出用省略号显示 white-space: nowrap; // 规定段落中的文本不进行换行 多行文字溢出: overflow: hidden; // 溢出 阅读全文
posted @ 2022-12-06 11:29 盼星星盼太阳 阅读(47) 评论(0) 推荐(0) 编辑
通用CSS命名惯例
摘要：通用的 CSS 命名惯例 在参与规模庞大、历时漫长、且参与人数众多的项目时，要确保每一行代码都像是同一个人编写的；这就要求所有开发者，都遵守相同的代码规范。在先前的文章前端项目开发规范意见，从宏观角度，对前端开发提出了些许建议。本问就 “CSS 命名“这一普遍性难题，做下探讨。 通用规则 保持 CS 阅读全文
posted @ 2022-11-16 15:31 盼星星盼太阳 阅读(48) 评论(0) 推荐(0) 编辑
CSS样式初始化
摘要：样式初始化 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px"宋体","Arial Narrow",HELV 阅读全文
posted @ 2022-10-14 10:18 盼星星盼太阳 阅读(117) 评论(0) 推荐(0) 编辑
CSS图片高斯模糊方式
摘要：方式一：filter:blur() 图片显示区域给定宽高，图片比例保持不变，周围空白区域填充图片模糊显示 核心属性： object-fit: contain; filter: blur(10px) brightness(1.2); 页面元素： <div class="wrapBox1"> <img 阅读全文
posted @ 2022-05-12 11:14 盼星星盼太阳 阅读(2237) 评论(0) 推荐(0) 编辑
CSS 实现透明方格的 3 种方式
摘要：经常用 photoshop 的同学对这样一个透明方格的背景再熟悉不过了，也有的叫做“棋盘”效果，如下 实现这种效果一定离不开渐变，本文介绍 3 种 CSS 绘制透明方格的小技巧 一、linear-gradient linear-gradient可以说是最早实现这种效果的应用了，当然实现也最为巧妙，也 阅读全文
posted @ 2022-03-21 14:17 盼星星盼太阳 阅读(286) 评论(0) 推荐(0) 编辑
vue横向平滑滚动消息通知
摘要：场景：横向平滑滚动展示消息；消息列表是接口获取；类似于游戏中的广播消息 方法一、纯css animation 在css中定义关键帧，并写入animation样式 // animation: line 20s linear infinite; // @keyframes line{ // 0%{ // 阅读全文
posted @ 2021-10-22 11:56 盼星星盼太阳 阅读(1596) 评论(0) 推荐(0) 编辑
实现让div垂直居中，左右10px，高度始终为宽度一半
摘要：方法一:利用height:0; padding-bottom: 50% 1.使用 padding-bottom:50%//父元素width的一半 (延伸:css的margin,padding百分比是相对于父元素的width来计算的)2.使用子绝父相下,子元素的百分比宽高为父元素的(content+p 阅读全文
posted @ 2021-07-27 11:11 盼星星盼太阳 阅读(366) 评论(0) 推荐(0) 编辑
20个编写现代CSS代码的建议
摘要：01、明白何谓Margin Collapse 不同于其他很多属性，盒模型中垂直方向上的Margin会在相遇时发生崩塌，也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时，只有二者中的较大值会被保留下来，可以从下面这个简单的例子来学习: .square { width: 80px 阅读全文
posted @ 2021-03-15 10:23 盼星星盼太阳 阅读(58) 评论(0) 推荐(0) 编辑
CSS选择器分类与解释
摘要：一、选择器优先级（权重） 选择器 行内样式（内联样式） id选择器 类选择器/属性选择器/伪类选择器 标签选择器 权重 1000 100 10 1 !importan简介 语法格式：{cssRule !important}，即写在定义的最后面； 声明了!important的样式，具有最高的优先级 b 阅读全文
posted @ 2020-03-05 20:19 盼星星盼太阳 阅读(392) 评论(0) 推荐(0) 编辑
CSS清除浮动几种方式与BFC
摘要：清除浮动几种方式 解决问题：子元素都设置浮动，父元素没有设置高度，出现高度塌陷的问题。 一、万能清除法（推荐使用） 给父元素加上class=clear，并设置样式（写入公共样式中） .clear:after{ content:""; display:block; clear:both; height 阅读全文
posted @ 2020-03-05 19:08 盼星星盼太阳 阅读(207) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示