目录
- 一、自适应布局和响应式布局
- 二、美化滚动条（Chrome和Firefox）
- 三、css文本超出隐藏
- 四、CSS中文转繁体
- 五、css禁用事件
- 六、css文字颜色渐变
- 七、css背景色渐变
- 八、禁止选中
- 九、图片自适应
- 十、HTML深浅模式
记录一些会用上，但是又不经常用上的css。这些东西记得不是很牢靠，每次需要用上时，知道要用什么，但是就不记得代码是怎么写来着，这里记录一下，加深一下印象
一、自适应布局和响应式布局
首先谈一下自适应布局、响应式布局这两种布局，刚开始学习前端时，概念还很模糊，认为都是同样的
1.自适应布局
- 描述：
不同屏幕分辨率下，保持原有展示方式。即元素的位置会变化而大小不会变化 - 优点：页面能够兼容不同分辨率的设备
- 缺点：屏幕太小会发生内容过于拥挤。所有的设备看起来都是一样的网站，不过是长度或者图片变小了，不会根据设备采用不同的展示样式
- 场景：传统 web 网站
2.响应式布局
- 描述：
不同屏幕分辨率下，展示的页面布局不同 - 优点：一套代码兼容 web 端、平板、以及手机端网页
- 缺点：工作量大、UI 设计也需要多个版本
- 场景：同时兼容多种不同设备
二、美化滚动条（Chrome和Firefox）
* {
/*火狐浏览器滚动条设置*/
/*设置滚动条颜色*/
scrollbar-color: #ccc #eee;
/*去掉三角(滚动条宽度为8px)*/
scrollbar-width: thin;
/*隐藏滚动条（可以滚动）*/
/* scrollbar-width: none; */
}
::-webkit-scrollbar {
/*Chrome下隐藏滚动条（宽度设为0即可）*/
width: 8px;
background: #eee;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
opacity: 0.5;
box-shadow: inset 0 0 2px #ccc;
}
::-webkit-scrollbar-thumb:hover {
background: #aaa;
}
三、css文本超出隐藏
在项目开发中，有些列表的文字内容太多时，在文本最后增加省略号（…），来隐藏多余的文字
1.单行超出隐藏显示省略号
元素必须是 block 或 inline-block，如果溢出被隐藏，则文本溢出不起作用，并且元素必须具有定义的宽度或最大宽度。
p {
display: inline-block;
max-width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
2.多行超出隐藏显示省略号
需要设置高度
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 需要显示的行数 */
overflow: hidden;
word-break:break-all; /* 强制英文单词断行 */
}
四、CSS中文转繁体
直接设置font-variant-east-asian: traditional;,比如加在body元素里面
body {
font-variant-east-asian: traditional;
}
五、css禁用事件
css可以阻止js事件发生，pointer-events: none;
例如：禁止图片的点击事件
img {
pointer-events: none;
}
六、css文字颜色渐变
<div id="text">文字介绍文字介绍</div>
#text {
background: linear-gradient(to bottom, #f00, #02f);
-webkit-background-clip: text;
color: transparent;
}
七、css背景色渐变
background: linear-gradient(135deg, rgba(212, 228, 239, 1) 0%, rgba(79, 158, 214, 1) 100%);
八、禁止选中
user-select: none;
九、图片自适应
img {
object-fit: fill; /* 图片宽高占满容器，会有拉伸的情况 */
object-fit: cover; /* 图片保持原有比例缩放,铺满容器,超出的可能会被裁剪 */
object-fit: contain; /* 图片原有比例进行缩放，图片全部显示出来 */
}
十、HTML深浅模式
通过css滤镜属性filter一行搞定，设置滤镜反转和色彩旋转filter: invert(1) hue-rotate(180deg);
下面是跟随系统切换对应模式
/* 浅色模式样式 */
@media (prefers-color-scheme: light) {
}
/* 暗色模式样式 */
@media (prefers-color-scheme: dark) {
html {
transition: all 0.5s; /* 增加动画，不会显得那么僵硬 */
filter: invert(1) hue-rotate(180deg);
}
}
CSS工具
css配置兼容样式 Autoprefix-http://autoprefixer.github.io/
css颜色渐变、边框阴影、圆角设置 https://www.cssmatic.com/gradient-generator