乐趣区

关于前端:这些CSS提效技巧你需要知道

jiezi

作者：knaagar
译者：前端小智
起源：dev

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

突变文字

h1{background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

批改 media defaults

编写 css 重置时，增加这些属性以改善媒体默认值。

img, picture, video, svg {
  max-width: 100%;
  object-fit: contain;  /* preserve a nice aspect-ratio */
}

column count

应用列属性为文本元素制作丑陋的列布局。

p{
  column-count: 3;
  column-gap: 5rem;          
  column-rule: 1px solid salmon; /* border between columns */
}

应用 position 居中元素

div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

逗号分隔的列表

li:not(:last-child)::after{content: ',';}

平滑的滚动

 html {scroll-behavior: smooth;}

hyphens

hyphens 告知浏览器在换行时如何应用连字符连贯单词。能够齐全阻止应用连字符，也能够管制浏览器什么时候应用，或者让浏览器决定什么时候应用。

first letter

防止不必要的 span，并应用伪元素来设计你的内容，同样第一个字母的伪元素，咱们还有第一行的伪元素。

 h1::first-letter{color:#ff8A00;}

accent-color

accent-color 属性可能应用自定义色彩值从新着色浏览器默认款式提供的表单控件的强调色彩。

Image filled text

h1{background-image: url('illustration.webp');
  background-clip: text;
  color: transparent;
}

placeholder 伪元素

应用 placeholder 伪元素来扭转 placeholder 款式：

input::placeholder{
  font-size:1.5em;
  letter-spacing:2px;
  color:green;
  text-shadow:1px 1px 1px black;
}

colors 动画

应用色彩旋转滤镜扭转元素色彩。

button{animation: colors 1s linear infinite;}

@keyframes colors {
  0%{filter: hue-rotate(0deg);
  }
  100%{filter: hue-rotate(360deg);
  }
}

clamp() 函数

clamp() 函数的作用是把一个值限度在一个下限和上限之间，当这个值超过最小值和最大值的范畴时，在最小值和最大值之间抉择一个值应用。它接管三个参数：最小值、首选值、最大值。

h1{font-size: clamp(5.25rem,8vw,8rem);
}

selection 伪类

设置选中元素的款式。

::selection{color:coral;}

decimal leading zero

将列表款式类型设置为十进制前导零。

li{list-style-type:decimal-leading-zero;}

自定义光标

html{cursor:url('no.png'), auto;
}

caret-color

caret-color 属性用来定义插入光标（caret）的色彩，这里说的插入光标，就是那个在网页的可编辑器区域内，用来批示用户的输出具体会插入到哪里的那个一闪一闪的形似竖杠 | 的货色。

only-child

CSS 伪类 :only-child 匹配没有任何兄弟元素的元素。等效的选择器还能够写成 :first-child:last-child 或者 :nth-child(1):nth-last-child(1) , 当然, 前者的权重会低一点.

应用 grid 居中元素

.parent{
  display: grid;
  place-items: center;
}

text-indent

text-indent 属性能定义一个块元素首行文本内容之前的缩进量。

p{text-indent:5.275rem;}

list style type

CSS 属性 list-style-type 能够设置列表元素的 marker（比方圆点、符号、或者自定义计数器款式）。

li{list-style-type:'🟧';}

原文：https://dev.to/devsyedmohsin/…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版