Sass(包括Sass和Scss)和Less都是CSS预处理器,它们扩展了CSS的功能,允许开发者使用变量、混入(mixins)、函数等编程特性来编写样式,最终这些代码会被编译成普通的CSS文件。尽管Sass和Less在功能上有很多相似之处,但它们之间也存在一些差异:
编译环...
yekong
3周前 (03-01) 34℃
0喜欢
scrollbar-width: thin; 是CSS属性,用于控制滚动条的宽度。这个属性是CSS Scrollbars Module Level 1的一部分,主要被用于Firefox等支持的浏览器中。scrollbar-width属性接受两个关键字值:auto和thin。
a...
yekong
3周前 (02-29) 29℃
0喜欢
在Sass中,你可以使用变量来控制滚动条的宽度和颜色。以下是如何定义和使用Sass变量来设置滚动条样式的示例:
// 定义变量
$scrollbar-horizontal-height: 6px;
$scrollbar-vertical-width: 6px;
$scrollba...
yekong
3周前 (02-29) 37℃
0喜欢
项目开发中,有时候内容过多的话,需要显示滚动条,所以我们设置了overflow-x: scroll;。
.progressList {
width: 400px;
position: relative;
height: 74px;
overflow-x: scro...
yekong
2个月前 (01-26) 98℃
0喜欢
在数据大屏项目开发中,有一些异形背景图为了更好的适配,会将图片切割成小块,然后再拼接以进行适配,但是在实际开发中会出现一种情况,就是在一些分辨率或者一些不同宽高比的情况下,会有一条黑线.
在不同分辨率下,div拼接出现黑线的问题可能是由于浏览器的渲染引擎在处理像素时的舍入误差导...
yekong
3个月前 (12-21) 125℃
0喜欢
当你设置了letter-spacing后,文字可能会出现不居中的情况。这是因为letter-spacing属性会在每个字符之间添加额外的空间,这可能会影响到文本的对齐方式。
解决这个问题的一种方法是使用text-indent属性。text-indent属性可以设置文本块的首行文本...
yekong
3个月前 (12-19) 104℃
0喜欢
之前我们遇到异形背景并且需要适配大小的时候使用过类似九宫格的思路,js 九宫格图片背景大小及定位生成,但是在一些复杂的情况比如类似下图,使用九宫格的方式也不是很方便,今天换一种思路使用flex的方式来实现。
实现代码
/**
* @Author: 858834013@qq.co...
yekong
3个月前 (12-10) 110℃
0喜欢
数据可视化大屏项目开发中,当父元素设置了display: flex;后,子元素指定宽度无效,文字仍然会超出边界外。
解决办法
给元素添加min-width: 0;属性,这样元素的宽度就不会超过你设置的值了。
修改前
.tableBody2 {
height: 32p...
yekong
4个月前 (12-03) 124℃
0喜欢
CSS的z-index属性的最大层级是±2147483647。这意味着你可以将z-index设置为任何介于-2147483647和2147483647之间的整数。然而,实际上在大多数情况下,你可能不需要使用这么大的z-index值。在CSS代码库中,你通常会看到z-index值为...
yekong
4个月前 (11-29) 248℃
0喜欢
我们在下载字体文件后会发现字体有很多种,格式也各不相同eot woff2 woff otf ttf都有,导致我们不知道如何引入了!
这里我们可以使用CSS的@font-face规则来引入多种字体文件格式。这样做的好处是,不同的浏览器可以选择支持的最佳文件格式来加载字体。以下是如何...
yekong
6个月前 (09-17) 186℃
0喜欢
数据可视化大屏开发中,只是纯色的图标看起来会单调一些,所以设置一个从上到下的颜色渐变效果。
html
<i class="icon iconfont" :class="item.icon"></i>
css
.i...
yekong
6个月前 (09-13) 196℃
0喜欢
数据可视化大屏项目中,会给图标增加一些旋转动画效果作为装饰,今天通过css来实现一个旋转动画效果。
动画效果
<div class="icons">
<div class="iconBg"></di...
yekong
6个月前 (09-13) 212℃
0喜欢
要从左到右创建多段背景色渐变,您可以在linear-gradient中定义多个颜色停靠点。每个颜色停靠点都可以有一个与其相关的位置,这决定了该颜色在渐变中的位置。
以下是一个示例,展示了如何从左到右创建一个多段的渐变,从红色到黄色(在25%的位置),然后到绿色(在50%的位置),...
yekong
6个月前 (09-12) 226℃
0喜欢
最近看到一个css特效之炫酷的发光按钮,感觉很不错,整理过来,将来可能会用到。
效果整理自:css特效之炫酷的发光按钮
效果截图
动态效果
效果代码
<!DOCTYPE html>
<html lang="en">
<head...
yekong
7个月前 (08-30) 258℃
0喜欢
最近看到一个css 实现水波纹效果,感觉很不错,整理过来,将来可能会用到。
效果整理自:css特效之底部波浪动画
效果截图
动态效果
效果代码
<!DOCTYPE html>
<html lang="en">
<hea...
yekong
7个月前 (08-30) 278℃
0喜欢
最近看到一个css特效卡片边缘流光效果,感觉很不错,整理过来,将来可能会用到。使用@keyframes rotation关键帧动画,让圆环从 0 度旋转到 360 度,实现发光彩色圆环特效的卡片
效果整理自:css特效之发光卡片
效果截图
动态效果
效果代码
<!DOC...
yekong
7个月前 (08-30) 418℃
0喜欢
数据可视化大屏 项目开发中,需要一个内部发光的效果,使用图片的话,在适配宽高的时候可能会变形,所以这里用css的内发光效果来实现效果。
效果截图
关键代码
.itemInfo {
position: relative;
width: 100%;
height: 10...
yekong
7个月前 (08-11) 349℃
0喜欢
动态效果
你可以使用CSS动画或JavaScript来实现文字依次显示的效果。以下是一个使用Vue和CSS动画的示例代码:
<template>
<div class="text-container">
<span...
yekong
7个月前 (08-11) 698℃
0喜欢
倾斜的斑马线效果可以通过CSS中的linear-gradient和repeating-linear-gradient来实现。这里有一个例子:
body {
min-height: 100vh;
display: flex;
align-items: center;
...
yekong
8个月前 (08-01) 283℃
0喜欢
在项目开发过程中,一般背景图片使用一个背景图就可以了,但是在实际项目开发中,会遇到各种情况,比如同一个组件需要在不同的宽高下使用,这时候如果复用同一个背景图那么图片就会变形。
多背景图拼接
在之前的项目开发中,遇到这种情况会使用vue 实现安卓.9图片类似的效果九宫格图片,这种类...
yekong
8个月前 (07-29) 353℃
0喜欢