22 个鲜为人知的 CSS 高招让你技高一筹

前端达人

发布于 2021-09-08 16:30:06

9700

发布于 2021-09-08 16:30:06

文章被收录于专栏：前端达人前端达人

英文 | https://betterprogramming.pub/22-css-tricks-that-can-make-you-a-layout-ninja-452847fba639

翻译 | 杨小二

今天我想告诉你一些在技术文献中也很少提到的 CSS 属性和值，但在我看来，它们对提高 Web 界面开发的速度和质量特别帮助。

我今天与你讨论的许多特性都是实验性的。所有现代浏览器都支持它们中的大多数。但是，如果你决定在开发项目中使用这些属性中的任何一个，请自行了解查询下浏览器对它是否支持，虽然目前大多数属性，现代浏览器是支持的。

那么，你准备好进入令人惊叹且几乎无边界的 CSS 世界了吗？让我们开始吧！

1、grid + place-items

这种技术允许你仅用两行代码水平和垂直对齐项目。

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

place-items 是 justify-items 和 align-items 的简写属性。

此属性可以一次应用于一个或多个（子）单元格。

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center
}

2、flex + margin

另一种水平和垂直对齐项目的现代方法是使用 display: flex 和 margin: auto 的组合。

.parent {
  display: flex;
}

.child {
  margin: auto;
}

其实，使用以下代码段可以完成相同的效果：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

3、flex + gap

既然我们在谈论 Flexbox，值得一提的是，我们终于能够使用 gap 属性设置 flex 项之间的间隙（我们真的需要这个）：

.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

4、inline-flex

此属性允许你创建具有 Flexbox 功能的内联元素。一个例子胜过我说很多话：

<span>👋</span>
<span>👌</span>
<span>👍</span>
<span>👐</span>

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  background: #fbfbfb;
}
span {
  width: 2.5em;
  height: 2.5em;
  /* --- */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* --- */
  background: #1266f1;
  border-radius: 30%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  font-size: 1.1rem;
}

5、columns

此技术允许你将文本拆分为列。column-count 属性指定列数，column-gap 设置列间间隙的大小，column-rule 设置列间垂直线的样式。

columns 是 column-count 和 column-width 的简写属性。

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis reprehenderit inventore ad libero officia, necessitatibus laudantium corporis veniam quae, fugiat dolores quaerat corrupti tempore ipsa consequuntur similique explicabo ducimus commodi expedita. Dolore commodi nesciunt harum? Consequuntur, voluptatibus odio! Maiores non alias autem tempore corrupti, animi accusamus repudiandae nam. Autem at explicabo molestias dignissimos repellendus, magnam laudantium ea quisquam, quam, tenetur adipisci facere quas. Accusantium architecto iste eius tempore consequatur quidem officiis delectus eaque sequi rem! Nesciunt voluptatum tempora voluptatem a sit, minima excepturi quaerat quasi soluta aspernatur quia explicabo incidunt, fugiat animi. Dolor provident corporis magni voluptate vel non earum?
</p>

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body {
  margin: 0;
  background: #262626;
  font-family: "Montserrat", sans-serif;
  color: #fbfbfb;
}
p {
  margin: 1em;
  /* --- */
  column-count: 3;
  column-gap: 2em;
  column-rule: 1px dotted;
  /* --- */
}

@media (max-width: 768px) {
  p {
    column-count: 2;
  }
}

@media (max-width: 512px) {
  p {
    column-count: 1;
  }
}

6、background-repeat

background-repeat 属性设置背景填充指定图像的顺序。round 值在容器的整个宽度上均匀分布图像，而 space 值在图像之间添加少量填充：

<div class="repeat"></div>
<div class="round"></div>
<div class="space"></div>

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fbfbfb;
}
div {
  width: 300px;
  height: 64px;
  background-image: url("https://pics.freeicons.io/uploads/icons/png/3733236321617275952-64.png");
}
.repeat {
  background-repeat: repeat;
}
.round {
  background-repeat: round;
}
.space {
  background-repeat: space;
}

7、background-blend-mode

background-blend-mode 属性设置背景图像和颜色（或多个背景图像/颜色）应该相互混合的顺序。

它的一些值：

color
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
overlay
saturation
screen
soft-light

你用过 Photoshop 吗？那我想你明白这是怎么回事了。

假设我们有一个想要用作背景的黑白图像。但同时，我们希望它是彩色的。我们怎样才能做到这一点？

<h1>
  look at <br />
  the sky
</h1>

@import url("https://fonts.googleapis.com/css2?family=Audiowide&display=swap");
@keyframes show {
  from {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
body {
  margin: 0;
  height: 100vh;
  /* --- */
  background: url("https://images.pexels.com/photos/414659/pexels-photo-414659.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"),
    linear-gradient(135deg, skyblue, steelblue 90%);
  background-blend-mode: overlay;
  /* --- */
  background-size: cover;
  display: grid;
  place-items: center;
}
h1 {
  font-family: "Audiowide", cursive;
  color: #00b74a;
  font-size: 4rem;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 2px #262626;
  animation: show 2s linear forwards;
}

8、background-clip

background-clip 属性定义了背景颜色或背景图像应该超出元素的内边距的程度。在我看来， text 是这个属性最有趣的值：

<p>nature</p>

9、filter

filter 属性允许你对元素应用一些视觉效果。

它的函数值：

url()
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()

为懒惰的人更改网站颜色主题（或方案）：

<input type="checkbox" class="theme" />
<p class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime. Adipisci quos quia veritatis nemo quaerat magnam dolorum tempora voluptatum deleniti consectetur enim ea facere nihil sed ut laborum hic, sapiente vel ratione harum, vero iusto laudantium. Porro accusantium a harum ipsam!
</p>

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.theme {
  cursor: pointer;
}
.theme:checked + .text {
  filter: invert();
}
.text {
  margin: 1em;
  padding: 1em;
  background: #262626;
  border-radius: 4px;
  font-family: "Montserrat", sans-serif;
  color: #fbfbfb;
  transition: 0.2s ease-in;
}

在 CSSgram 上，你会找到一个为 Instagram 过滤器使用过滤器的示例。

10、drop-shadow

设置为 drop-shadow() 的 filter 属性与 box-shadow 属性不同，它在应用效果方面类似，允许你向图像本身（以 PNG 格式）添加阴影，而不是添加到其中的框。

<input type="checkbox" class="theme" />
<p class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam dolores quod debitis veritatis placeat nemo iste natus maxime. Adipisci quos quia veritatis nemo quaerat magnam dolorum tempora voluptatum deleniti consectetur enim ea facere nihil sed ut laborum hic, sapiente vel ratione harum, vero iusto laudantium. Porro accusantium a harum ipsam!
</p>

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.theme {
  cursor: pointer;
}
.theme:checked + .text {
  filter: invert();
}
.text {
  margin: 1em;
  padding: 1em;
  background: #262626;
  border-radius: 4px;
  font-family: "Montserrat", sans-serif;
  color: #fbfbfb;
  transition: 0.2s ease-in;
}

11、object-fit

object-fit 属性控制被替换元素的纵横比，例如 img 和 video，如果它们有宽度或高度，以及缩放过程。

例如，缩小值允许你保持图像的纵横比，而不管框大小：

<img src="https://pics.freeicons.io/uploads/icons/png/21088442871540553614-64.png" alt="js" />
<img src="https://pics.freeicons.io/uploads/icons/png/20167174151551942641-64.png" alt="react" />
<img src="https://pics.freeicons.io/uploads/icons/png/191213921552037062-64.png" alt="vue" />

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  background-color: #fbfbfb;
}
img {
  width: 100px;
  height: 100px;
  /*  ---  */
  object-fit: scale-down;
  /*  ---  */
  border: 1px dashed #262626;
  border-radius: 4px;
}

object-position 属性用于对齐框内任何选定的替换元素的内容。

12、cursor

你知道吗，除了浏览器提供的光标图标（比如cursor:pointer），我们还可以定义自己的图片和SVG？

<div class="image">image</div>
<div class="svg">svg</div>

body {
  margin: 0;
  height: 100vh;
  background-color: #fbfbfb;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4em;
}
div {
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  background-image: linear-gradient(yellow, orange);
  font-family: system-ui;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.image {
  cursor: url("https://pics.freeicons.io/uploads/icons/png/20278001131579606320-32.png"),
    auto;
}
.svg {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='40' viewport='0 0 100 100' style='fill:black;font-size:22px;'><text y='50%'>🐧</text></svg>"),
    auto;
}

13、scroll-behavior

scroll-behavior 属性设置为 smooth 可以轻松实现页面部分之间的平滑滚动：

<nav>
  <h3>Scroll to</h3>
  <a href="#a">A</a>
  <a href="#b">B</a>
  <a href="#c">C</a>
</nav>
<section id="a">
  <h3>A</h3>
</section>
<section id="b">
  <h3>B</h3>
</section>
<section id="c">
  <h3>C</h3>
</section>

html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: system-ui;
  color: #fbfbfb;
}
nav {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
h3 {
  margin: 0;
  letter-spacing: 1px;
}
a {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dashed;
}
a + a {
  margin-left: 1em;
}
section {
  width: 100%;
  height: 100vh;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#a {
  background-color: #1266f1;
}
#b {
  background-color: #00b74a;
}
#c {
  background-color: #f93154;
}

14、text-overflow

设置为省略号的 text-overflow 属性允许你在文本超出容器时将... 添加到文本的末尾。

p {
  text-overflow: ellipsis;
}

15、caret-color

caret-color 属性设置插入符号的颜色，可见标记 (|) 指示下一个键入的字符将被插入的位置。

textarea {
  caret-color: #00b74a;
}

16、@supports

@supports 规则允许你在使用之前检查浏览器是否支持特定的一个或多个属性（或属性/值组合）。

/* check support for `grid` and `image-rendering` properties */
@supports (display: grid) {
  section {
    display: grid;
  }
}

@supports (image-rendering) {
  img {
    image-rendering: pixelated;
  }
}

17、var（）

var() 函数允许你使用自定义变量的值作为属性值。此函数的第二个可选参数是保留值。

/* define a custom variable - the main background color */
:root {
  --primary-bg-color: #1266f1;
}

/* and use it */
button {
  background-color: var(--primary-bg-color)
}

18、calc（）

calc() 函数用于指定使用大小、角度、时间或数字作为值的属性的计算值。这允许根据不同单位的加减来设置值。

通常，绝对定位的元素水平和垂直对齐如下：

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

如果我们知道这样一个元素的尺寸，我们可以执行以下操作：

/* let's say an element has a height of 100px and a width of 200px */
.modal {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 100px);
}

19、attr（）

使用 attr() 函数，你可以检索所选元素的属性值并在样式中使用它。

使用 CSS 创建工具提示：

<p>Some <span data-tooltip="tooltip">text</span> here</p>

p {
  margin: 2em;
  font-size: 1.25rem;
}
span {
  color: #1266f1;
  border-bottom: 1px dashed;
  position: relative;
  cursor: pointer;
}
span::after {
  /*  ---  */
  content: attr(data-tooltip);
  /*  ---  */
  position: absolute;
  top: -1.25em;
  left: 50%;
  transform: translateX(-50%);
  color: #00b74a;
  font-style: italic;
  opacity: 0;
  transition: 0.2s;
}
span:hover::after {
  opacity: 1;
}

20、:target

:target 伪类允许你创建无需 JavaScript 即可工作的模态：

<a href="#modal" class="link">Show modal</a>

<div class="modal" id="modal">
  <div class="overlay">
    <div class="content">
      <h3>Title</h3>
      <p>Description</p>
      <a href="#" class="close">✖</a>
    </div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}
a {
  text-decoration: none;
}
.link {
  display: block;
  text-align: center;
  margin-top: 1em;
}
/* --- */
.modal {
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease-in;
}
.modal:target {
  opacity: 1;
  visibility: visible;
}
/* --- */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
}
.content {
  width: 320px;
  padding: 1em 0;
  background-color: #fbfbfb;
  border-radius: 2px;
  text-align: center;
  color: #262626;
  position: relative;
}
.content > *:not(.close) {
  margin: 1em 0;
}
.close {
  position: absolute;
  top: 5px;
  right: 10px;
  color: #f93154;
}

21、::marker

我们曾经使用 list-style: none 删除列表标记，并使用 ::before 或 ::after 伪元素添加我们自己的标记。现在有一种更简单的方法可以做到这一点——我们可以使用 ::marker 伪元素。

<ul>
  <li>Prima</li>
  <li>Altera</li>
  <li>Triera</li>
</ul>

li::marker {
  content: "✔ ";
  color: green;
}
li:last-child::marker {
  content: "✖ ";
  color: red;
}

22、::selection

::selection 伪元素允许你设置文本选择的样式。

p::selection {
  background-color: #262626;
  color: #fbfbfb;
}

最后，感谢你的阅读，感谢你的时间，祝你有美好的一天！

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2021-08-27，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自前端达人微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度

22 个鲜为人知的 CSS 高招让你技高一筹

22 个鲜为人知的 CSS 高招让你技高一筹

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐