[译]这几个CSS小技巧，你知道吗？
前言
在网页设计和前端开发中，CSS属性是非常重要的一部分。掌握常用的CSS属性不仅可以使你的网页看起来更美观，还能提升用户体验，今天小编为大家介绍8个常见的CSS小技巧：
1.修改滚动条样式
下图是我们常见的滚动条，现在需要改变滚动条的宽度和颜色了，并把它画的圆一点。
（常见的滚动条）
可以用::-webkit-scrollbar来实现：
/*设置滚动条的宽度*/
::-webkit-scrollbar{
width: 10px;
}
/*将轨道改为蓝色，并设置圆形边框*/
::-webkit-scrollbar-track{
background-color: blue;
border-radius: 10px;
}
/* 将滚动条设置为灰色并将其设置为圆形*/
::-webkit-scrollbar-thumb{
background: gray;
border-radius: 10px
}
/*悬停时呈深灰色*/
::-webkit-scrollbar-thumb:hover{
background: darkgray;
}
（改变之后的滚动条）
2.修改光标停留在页面上的样式
一般情况下鼠标的样式是一个箭头，改变鼠标光标的样式为其他类型：
/*类为first的元素，设置鼠标为不可用状态 。 */
.first{
cursor: not-allowed;
}
/* 类为second的元素，将鼠标指针设置为放大镜效果 */
.second{
cursor: zoom-in;
}
/* 类为third的元素，将鼠标指针设置为十字准星形状*/
.third{
cursor: crosshair;
}
（改变之后的光标）
3.保持组件的纵横比大小
在构建响应式组件的时候，组件的高度与宽度的不协调经常会导致视频和图像会出现拉伸的情况，影响读者的观感，因此我们需要设置组件的纵横比属性：
.example{
/* 设置纵横比 */
aspect-ratio: 1 / .25;
/* 设置宽度后，高度自动设置 */
width: 200px;
/*设置边框.*/
border: solid black 1px;
}
设置了宽度之后，我们将自动得到等于125像素的高度，以保持长宽比。
（显示效果）
4.页面平滑的滚动
通过代码实现平滑地从一个页面跳转到另一个页面：
<!DOCTYPE html\>
<html\>
<head\>
<style\>
/*设置页面平滑地滚动*/
html {
scroll-behavior: smooth;
}
#section1 {
height: 600px;
background-color: pink;
}
#section2 {
height: 600px;
background-color: yellow;
}
<style\>
<head\>
<body>
<h1\>Smooth Scroll</h1\>
<div class="main" id="section1"\>
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
<a href="\#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
<div class="main" id="section2">
<h2>Section 2</h2>
<a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>
<p><strong>Note:</strong> The scroll-behavior property is not supported in Internet Explorer.</p>
</body>
</html>
点击这里查看效果：
5.筛选
使用 CSS 向图像添加滤镜：
img{
filter: /*YOUR VALUE */;
}
有许多可用的过滤器。您可以模糊、增亮和饱和滤镜。您可以将图像设为灰度、更改其不透明度、反转颜色等等。
正常图像（左）、模糊图像（中）和高对比度图像（右）
增亮图像（左）、灰度图像（中）和色调旋转图像（右）
点击此页面了解更多关于筛选的详细信息。
6.背景效果
使用backdrop-filter在图片中添加背景。
<div class="image"\>
<div class="effect">
backdrop-filter: blur(5px);
</div>
</div>
<style>
.image{
background-image: url(YOUR URL);
background-size: cover;
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.effect{
font-size: x-large;
color: white;
font-weight: 800;
background-color: rgba(255, 255, 255, .3);
backdrop-filter: blur(5px);
padding: 20px;
}
</style>
（实现的效果）
7.组件反射
在 SVG 下方创建反射：
.example{
/* 反射将出现在下面。其他可能的值如下:| left | right */
-webkit-box-reflect: below;
}
（方框反射）
抵消反射：
.example{
/* 反射将出现在下面。其他可能的值如下:| left | right */
-webkit-box-reflect: below 20px;
}
（带有偏移的反射）
渐变反射：
.example{
/* 反射将出现在下面。其他可能的值如下:| left | right */
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5));
}
（渐变反射）
8. 检查浏览器是否支持某个属性
使用@Supports检查 CSS 是否支持特定属性。
/* 检查浏览器是否支持显示 */
@supports (display: flex){
/* 如果支持，则显示为flex。*/
div{
display: flex
}
}
以上就是关于CSS的8个小技巧，希望可以帮助到大家。
本文为翻译，原文地址：
扩展链接：
React + Springboot + Quartz，从0实现Excel报表自动化
[译]这几个CSS小技巧，你知道吗？的更多相关文章
- css小技巧（1）
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
- CSS 小技巧
CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...
- 常用的CSS小技巧
实际开发过程中会遇到一些需要用CSS小技巧处理的布局问题,现在分享几个个人工作中遇到的小问题和解决方案. 1.inline元素间的空白间隙 这里要介绍一个神器font-size:0. 如果你写了个列表 ...
- 前端开发者应该知道的 CSS 小技巧
一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...
- CSS 小技巧 | 一行代码实现头像与国旗的融合
到国庆了,大家都急着给祖国母亲庆生. 每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款: emm,很不错. 那么,将一张国旗图片与我们的头像,快速得到想要的头像,使用 CSS 如何 ...
- 模仿也是提高，纯css小技巧实现头部进度条
刚开始的时候我也觉得不可能,但是就是这么神奇,总有大神给你意想不到的惊喜. 快来感受一下把.(仔细看看头部黄色条的变化) 思考一下啊,怎么出现的那,其实作者使用了一点小技巧,那就是背景色渐变和遮挡产生 ...
- Css 小技巧总结
相对偏移 指定left top等属性就能够够完美控制一个元素的位置 如: position:relative; left:2px; 今天遇到一个很好玩的问题,当两个并排浮动框,当一个框的长度太大时就会 ...
- Web前端开发基础 第四课（CSS小技巧1）
垂直居中-父元素高度确定的单行文本 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的.如下代码: <div class=&q ...
- CSS小技巧使用
1.清除浮动 浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很多方式来避免这种麻烦,其中我觉得最方便也是兼容性最好的一种是....// 清除浮动 .clearfix{ zoom: 1; } .c ...
- css小技巧
每逢大的灾难的时候,很多网站变成了灰色,如何让网站快速变灰?css代码是很简单的,用的是css的filter功能. html { filter: grayscale(100%);//IE浏览器 -we ...
随机推荐
- 手机app抓包个人简述
1.将在网上下载的手机软件放入apps 2.启动 3.查看结果 urls里是网址
- 【爬虫+数据清洗+可视化】用Python分析“淄博烧烤“的评论数据
目录 一.背景介绍 二.爬虫代码 2.1 展示爬取结果 2.2 爬虫代码讲解 三.可视化代码 3.1 读取数据 3.2 数据清洗 3.3 可视化 3.3.1 IP属地分析-柱形图 3.3.2 评论时间 ...
- SpringBoot整合OSS文件上传
一.注册阿里云账号并开通OSS服务 1.登录阿里云账号 2.创建一个bucket 3.创建子用户 对自用户分配权限,打开操作OSS的全部权限(也可根据业务需求进行更改) 4.配置上传跨域规则 任何来源 ...
- Python自动化测试面试题精选（一）
Python自动化测试面试题精选 今天由勇哥给你介绍一些Python自动化测试中常见的面试题,涵盖了Python基础.测试框架.测试工具.测试方法等方面的内容,希望能够帮助你提升自己的水平和信心. 项 ...
- 旧版Vue配置API_ROOT,开发、生产地址切换
1 目录 config/dev.env.js1 'use strict' 2 const merge = require('webpack-merge') 3 const prodEnv = requ ...
- #PowerBi Superchange PowerBi 序言部分笔记（2）
Xmind本文思维导图 序言部分,主要讲述了BI的分类及发展,以及作者推荐的学习方法.重点是介绍了powerbi的主要四大步骤. 即: 一:数据采集 Data acquisition: Power B ...
- 衔尾法解决当无法使用空闲中断以及DMA中断时配置DMA接收串口不定长数据
[Ooonly新人贴]记录工作中遇到的问题,话不多说先上干货 问题:类似K线与蓝牙接收部门模块,要求由原来的接收串口中断改为DMA接收.据说要用到空闲中断与DMA中断,但是经仿真发现DMA每完成传输一 ...
- FPGA加速技术：在数据中心和云计算中的应用
目录 1. 引言 2. 技术原理及概念 3. 实现步骤与流程 3.1 准备工作:环境配置与依赖安装 3.2 核心模块实现 3.3 集成与测试 4. 应用示例与代码实现讲解 4.1. 应用场景介绍 4. ...
- 一文了解Go语言的匿名函数
1. 引言 无论是在Go语言还是其他编程语言中,匿名函数都扮演着重要的角色.在本文中,我们将详细介绍Go语言中匿名函数的概念和使用方法,同时也提供一些考虑因素,从而帮助在匿名函数和命名函数间做出选择. ...
- G1垃圾回收参数调优及MySQL虚引用造成GC时间过长分析
1. 背景 我方有一应用,偶尔会出现GC时间过长(间隔约4小时),导致性能波动的问题(接口最长需要耗时3秒以上).经排查为G1垃圾回收器参数配置不当 叠加 MySQL 链接超过闲置时间回收,产生大量的 ...