11 个非常有用的 CSS One-Liner

翻译

wx6332e0803afcf 2022-11-08 13:35:52

文章标签 chrome firefox css 文章分类 运维

11 个非常有用的 CSS One-Liner_chrome

英文 | https://javascript.plainenglish.io/11-css-one-liners-that-are-insanely-useful-8a2878200474

翻译 | 杨小爱

在今天的文章中，我们将分享一些非常有用的 CSS 代码片段，它们简短而强大。

使用这些代码片段，您可以立即改善网站的外观。

下面是 11 个非常有用的 CSS 代码片段：

1、滚动效果

html {
  scroll-behavior: smooth;
}

这行简单的代码可以让您免于编写一些复杂的 JavaScript。

11 个非常有用的 CSS One-Liner_firefox_02

此属性可以定义，当用户单击以滚动框中的锚定位置为目标的链接时，浏览器的滚动位置是跳跃还是平滑过渡。

浏览器Chrome 版本 61+、Firefox 36+ 和 Edge 版本 79+ 均支持此属性。

2、剪辑路径属性

clip-path: circle(40%);
clip-path: ellipse(130px 140px at 10% 20%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');

11 个非常有用的 CSS One-Liner_firefox_03

clip-path CSS 属性允许我们控制可以显示剪辑区域的哪些部分。

显示区域内的内容，而隐藏外部部分。

浏览器Chrome 版本 55+ 和 Edge 版本 12+ 均支持此属性。

3、过滤属性

filter: drop-shadow(16px 16px 20px red);

11 个非常有用的 CSS One-Liner_chrome_04

使用 CSS one-liner，您可以轻松地为图像添加令人惊叹的滤镜。

此属性允许轻松应用视觉效果，如投影、模糊、颜色偏移、反转颜色等。

下面给出了其中一些属性。

filter: blur(5px);
filter: contrast(200%);
filter: grayscale(80%);

浏览器Chrome 版本 53+、Firefox 版本 35+ 和 Edge 版本 12+ 均支持此属性。

4、伪类

:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

函数 :is() 帮助我们使用选择器列表将相同的样式应用于一堆不同的元素。

这些选择器列表将作为参数传递给 :is() 函数，选择器列表可以选择的任何元素都会受到影响。

它可以在编写简短的 CSS 文件和实现 DRY（不要重复自己）原则时派上用场。

浏览器Chrome 版本 10+、Chrome 版本 88+、Firefox 版本 78+ 、 Edge 版本 88+、 Firefox 版本 29+ 、Edge 版本 12+ 均支持此属性。

5、用户选择属性

div {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

曾经想阻止您的用户复制文本吗？如果是，则您可以使用user-select 属性实现此功能。

user-select 属性指定是否可以选择文本。

浏览器Chrome 版本 54+、Firefox 版本 69+ 和 Edge 版本 72+ 均支持此属性。

6、改变光标

div{
   cursor:alias;
}

您可以使用这个简单而强大的属性轻松更改光标的外观。

11 个非常有用的 CSS One-Liner_firefox_05

您可以使用大量的值。不同的游标传达不同的含义。

例如，可移动对象有一个 cursor:grab 属性来表示它们是可拖动的元素。

浏览器Chrome 版本 1+、Firefox 版本 1+ 和 Edge 版本 12+ 均支持此属性。

7、插入符号颜色

input {
  caret-color: red;
}

只需使用简单的 CSS，您就可以更改输入、文本区域或任何可编辑元素中光标的颜色。

根据网站的不同，它可以为您的网站提供统一性。

浏览器Chrome 版本 57+、Firefox 版本 53+ 和 Edge 版本 79+ 均支持此属性。

8、自定义滚动条

::-webkit-scrollbar {
  width: 20px;
}

您可以使用此属性轻松自定义滚动条，为您的网站提供独特的触感。

此外，您还可以轻松更改滚动条轨道和拇指。

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
}


body::-webkit-scrollbar-thumb {
  background-color: red;
  outline: 1px solid red;
}

9、书写模式