分类:css

css

css实现渐变色文字添加阴影

css实现渐变色文字添加阴影
数据可视化大屏项目开发中,会遇到ui设计图中文字是渐变色加阴影的效果。 ui设计图效果如下 css实现 我们通过蓝湖生成的css生成出来的样式效果,这和我们的预期差别太大了。 这里我们可以使用伪类来实现我们想要的效果 使用伪元素 通过使用伪元素 ::before 或 ::af...

yekong 3个月前 (09-01) 喜欢

postcss-pxtorem排除特定文件和目录

postcss-pxtorem排除特定文件和目录
数据可视化大屏项目中,我们为了适配大屏,我们需要将px转为rem但是我也会遇到特别的情况,比如只有部分页面需要转换,另外一部分页面不需要转换。 测试环境 vue3 vite js 和 vue2 webpack js 测试版本 "postcss": "...

yekong 4个月前 (07-26) 喜欢

css如何避免图片变形

css如何避免图片变形
object-fit: contain 属性是一种有效的 CSS 方法,可以避免图片在固定尺寸容器中变形。以下是关于 object-fit: contain 的主要特点和使用方法: 保持原始比例: object-fit: contain 会保持图片的原始宽高比,不会对图片进行...

yekong 4个月前 (07-17) 喜欢

css 设置transform: scale(1.4641)后,部分内容看不到

css 设置transform: scale(1.4641)后,部分内容看不到
vue项目开发中,需要对div进行放大缩小处理,这里使用的是transform: scale(1.4641),但是放大后滚动条滚到顶部,仍然有一部分内容看不到。 解决办法 transform-origin 属性允许你改变元素变形的原点。默认情况下,这个原点是元素的中心,但你可以...

yekong 6个月前 (05-11) 喜欢

CSS鼠标悬停时暂停动画

CSS鼠标悬停时暂停动画
在网页设计中,动画是增强用户体验的有效手段之一。它们可以引导用户的注意力,提供视觉反馈,甚至让页面看起来更加生动有趣。CSS动画是实现这些效果的常用技术。然而,在某些情况下,我们可能希望用户能够控制动画的播放,例如,当用户鼠标悬停在动画元素上时,动画暂停,以便用户可以更好地观察动...

yekong 8个月前 (04-09) 喜欢

处理CSS前缀问题 AutoPrefixer

处理CSS前缀问题 AutoPrefixer
Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。 css 代码: a { -webkit-border-radi...

yekong 8个月前 (04-05) 喜欢

less和sass的区别?

less和sass的区别?
Sass(包括Sass和Scss)和Less都是CSS预处理器,它们扩展了CSS的功能,允许开发者使用变量、混入(mixins)、函数等编程特性来编写样式,最终这些代码会被编译成普通的CSS文件。尽管Sass和Less在功能上有很多相似之处,但它们之间也存在一些差异: 编译环...

yekong 9个月前 (03-01) 喜欢

scrollbar-width: thin; 这里的thin是多宽?

scrollbar-width: thin; 这里的thin是多宽?
scrollbar-width: thin; 是CSS属性,用于控制滚动条的宽度。这个属性是CSS Scrollbars Module Level 1的一部分,主要被用于Firefox等支持的浏览器中。scrollbar-width属性接受两个关键字值:auto和thin。 a...

yekong 9个月前 (02-29) 喜欢