[译]这几个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 ...
随机推荐
- ABP - 依赖注入(1)
依赖注入实现了系统之间.模块之间和对象之间依赖关系的解耦,基本上是现代应用程序框架必不可少的一个组成部分. ABP的依赖注入系统是基于Microsoft的依赖注入扩展库(Microsoft.Exten ...
- Typora使用方法
Typora使用方法 常见快捷键 无序列表:- + 空格 有序列表:1. + 空格 引用:> + 空格 标题:ctrl + 数字 表格:ctrl + t 选中一整行:ctrl + l 选中单词: ...
- Java革命性ORM框架之快速上手的Jimmer
Jimmer是一款革命性的ORM框架,它的目标是提供一个简单易用的API,帮助开发人员更加轻松地操作数据库.Jimmer使用了Java 8的新特性,如Lambda表达式和Stream API,使得代码 ...
- .NET指定图片地址下载并转换Base64字符串
需求描述 需要调用第三方图片上传接口上传图片,对方图片格式只能接收Base64字符串.所以我们需要将系统服务器的图片通过Url下载下来,然后转换成Base64字符串.接下来我们将使用HttpClien ...
- HStore表全了解：实时入库与高效查询利器
摘要:本文章将从使用者角度介绍HStore概念以及使用. 本文分享自华为云社区<GaussDB(DWS)HStore表讲解>,作者:大威天龙:- . HStore表简介 面对实时入库和实时 ...
- 前端树形结构图treeShapeStruct，可拖拽移动，点击展开收缩，无限添加子集
快速实现树形结构图,可拖拽移动,点击展开收缩,无限添加子集; 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12650 效果图如 ...
- Python运维开发之路《函数》
函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也可以自己创建函 ...
- VisionPro学习笔记（2）——图像转换工具ImageCovertTool
众所周知,VisionPro是一款功能强大的机器视觉软件,用于开发和部署机器视觉应用程序.其中ImageConvertTool是其中一个重要的工具,用于图像转换和处理.本文将介绍如何使用ImageCo ...
- Vue学习之认识ref
ref相当于一个dom节点,值为string 通俗将类似于原生js的document.querySelector('xxx'):但是不同的是vue是操纵虚拟dom,在渲染初期并没有这个属性,而是在创建 ...
- NumPy(1)-常用的初始化方法
一.NumPy介绍 NumPy是Python中科学计算的基础包,它是一个Python库,提供多维数组对象,各种派生对象(如掩码数组和矩阵),以及用于数组快速操作的各种API,有包括数学.逻辑.形状操作 ...