css圆形背景_CSS背景重复：圆形

css圆形背景

The CSS spec is full of gems that sneak their way past most of us web designers and developers. Stuff like :focus-within, prefers-reduced-motion, and prefers-color-scheme suddenly make their way into CSS without us really finding out for months or years. One such example is background-repeat: round.

CSS规范中充满了宝石，它们悄悄地超越了我们大多数的Web设计人员和开发人员。 像：focus-within之类的东西， 喜欢降低运动效果 ，并且喜欢颜色方案突然进入CSS了，而我们却没有真正找出几个月或几年的时间。 一个这样的例子是background-repeat: round 。

background-repeat: round repeats a background image without clipping!

background-repeat: round重复背景图像而不会剪切！

.my-element {
  background-image: url(logo.png);
  background-repeat: round;
}

Addy Osmani's tweet beautifully depicts the effect of round:

Addy Osmani的推文很好地描绘了round的效果：

TIL CSS "background-repeat: round" https://t.co/sS9H9HmqQ6 ~ repeats background images without clipping ✂️ pic.twitter.com/R4rzDJ36R9

— Addy Osmani (@addyosmani)

TIL CSS“背景重复：圆” https://t.co/sS9H9HmqQ6 〜重复的背景图像，无需裁剪✂️ pic.twitter.com/R4rzDJ36R9

-艾迪·奥斯曼尼(@addyosmani) June 23, 2020 2020年6月23日

This background effect is really nice, as clipped backgrounds cheapen the look of any element!

这种背景效果确实很棒，因为剪裁的背景会降低任何元素的外观！

翻译自: https://davidwalsh.name/css-background-repeat-round

css圆形背景