每日一博 | 分享 8 个 CSS 小技巧

2023-09-05 883

前言

在网页设计和前端开发中，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个小技巧，希望可以帮助到大家。

本文为翻译，原文地址：

https://medium.com/@anirudh.munipalli/10-powerful-css-properties-that-every-web-developer-must-know-e5d7f8f04e10

扩展链接：

高级SQL分析函数-如何用窗口函数进行排名计算

3D模型+BI分析，打造全新的交互式3D可视化大屏开发方案

React + Springboot + Quartz，从0实现Excel报表自动化

微信关注我们

原文链接：https://my.oschina.net/powertoolsteam/blog/10107858

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

深度集成开发环境 (deepin-IDE) 开源代码仓库

代码拉取完成，页面将自动刷新

2023-09-05

939

JetBrains 已公布了 WebStorm 2023.3 版本的路线图，以便用户可以率先了解到官方的规划以及能够预览一下未来能够用上的新功能。 WebStorm 2023.3计划于 11 月底发布，此版本的主要关注点之一将是解决现有的痛点，特别是在type-only imports、TypeScript service和 monorepos 方面。开发团队将致力于完善新功能，例如改进的错误格式和语言服务器集成。并计划添加对已发布的新版本语言和框架的功能的支持；以及改进性能，尤其是修复 freezes 问题。主要聚焦于以下内容：完善 WebStorm 中最近添加的功能。之前的版本引入了一些非常重要的新功能，包括改进了 TypeScript 和 JavaScript 中的错误格式以及对 Svelte 和 Vue 语言服务器的语言服务器支持。在此版本中将继续改进和完善这些功能。支持新的 CSS 功能。将支持的一大重要功能是@property（WEB-60090），它代表 stylesheet 中的自定义属性注册，允许属性类型检查、设置默认值以及属性是否应该继承值。 Type-onl...

2023-09-05

977

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。