首页 > 解决方案 > 背景重复:当父母变得太宽时,空间似乎停止工作

问题描述

我一直spaceround玩弄background-repeat. 从理论上讲,这应该意味着我可以使用径向渐变在元素上创建一个漂亮的虚线边框,而不会切断点。

.test {
  background-repeat: space no-repeat;
  background-size: 20px 10px;
  background-image: radial-gradient(circle closest-side, red calc(100% - 1px), transparent 100%);
  transition: background-image 0.5s linear;
  padding-bottom: 10px !important;
  background-position: left top;
  resize: both;
  overflow: auto;
  border: 2px solid;
  padding: 20px; 
  width: 310px;
}

https://jsbin.com/momiwokena/1/edit?css,输出

它在 Chrome 中运行良好,但在 Safari 中,一旦元素变得太宽,它就会停止工作,从而导致右侧的点被截断。

如何让 Safari 不切断点?

编辑:这是苹果提出的。

标签: csssafaribackground-imagebackground-repeat

解决方案


推荐阅读