[译]这几个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 ...
随机推荐
- 封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
相信很多公司的前端开发人员都会选择使用vue+element-ui的形式来开发公司的管理后台系统,基于element-ui很丰富的组件生态,我们可以很快速的开发管理后台系统的页面(管理后台系统的页面也 ...
- 【LeetCode双向链表】LRU详解，双向链表实战
LRU缓存 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构. 实现 LRUCache 类: LRUCache(int capacity) 以 正整数 作为容量 capacity ...
- jquery页面搜索关键词突出显示
页面搜索关键词突出 // 页面搜索关键词突出 $(function () { $(".list_r").find('span').css({ // 每次搜索开始,先把所有字体颜色恢 ...
- 为什么 Biopython 的在线 BLAST 这么慢？
用过网页版本 BLAST 的童鞋都会发现,提交的序列比对往往在几分钟,甚至几十秒就可以得到比对的结果:而通过调用 API 却要花费几十分钟或者更长的时间!这到底是为什么呢? NCBIWWW 基本用法 ...
- 浅析 Jetty 中的线程优化思路
作者:vivo 互联网服务器团队- Wang Ke 本文介绍了 Jetty 中 ManagedSelector 和 ExecutionStrategy 的设计实现,通过与原生 select 调用的对比 ...
- mysql索引优化-01
1.1索引是什么? mysql官方对于索引的定义:可以帮助mysql高效的获取数据的数据结构. mysql在存储数据之外,数据库系统中还维护着满足特定查找算法的数据结构,这些数据结构给以某种引 ...
- IoTOS-v1.2.1接入J-IM(t-io)后台通知App
IoTOS v1.2.1 一.登录页增加可修改轮播 登录页增加可修改数据轮播: 首页轮播图由背景图片.标题.介绍.按钮一.按钮二(可配置跳转地址打开方式)组合而成 二.登录页增加常用运营商平台& ...
- 为什么使用ioutil.ReadAll 函数需要注意
1. 引言 当我们需要将数据一次性加载到内存中,ioutil.ReadAll 函数是一个方便的选择,但是ioutil.ReadAll 的使用是需要注意的. 在这篇文章中,我们将首先对ioutil.Re ...
- Flutter upgrade 卡死问题
使用 到本地的flutter sdk的目录下 $flutter upgrade --force 降低到指定版本 : $flutter version 1.22.4
- Code Generate 代码生成器 V1.0
Code Generate V1.0 代码生成器 根据配置的模板,根据建表语句,生成Code. 例如java代码.vue代码.jsp代码以及html代码等等,均可根据自己的代码写作习惯进行配置. 缺点 ...