html - CSS 列规则样式？

Question

好的，所以基本上我是在尝试将渐变应用于列规则，但结果并不......如预期的那样。

也许我遗漏了什么？

.rule { 
     border: 0;
     margin-top: 0;
     width: 1px;
     height: 200px;
     background: radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
     float: left;
     }

 .columns {
     float: left;
     margin: 3.5em 1em;
     width: 80%;
     -ms-column-count: 2;
     -webkit-column-count: 2;
     -moz-column-count: 2;
     column-count: 2;
     column-gap: 4em;

 /* this works */
     -ms-column-rule: 1px solid rgba(0,0,0,1);
     -webkit-column-rule: 1px solid rgba(0,0,0,1);
     -moz-column-rule: 1px solid rgba(0,0,0,1); 
     column-rule: 1px solid rgba(0,0,0,1);

 /* this does not */
  /* -moz-column-rule: 1px solid radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
     -ms-column-rule: 1px solid radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
     -webkit-column-rule: 1px solid radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
     column-rule: 1px solid radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
 */ 
 }

https://jsfiddle.net/VileTouch/0exLthpq/

好吧，这就是它的结局。没有列规则并使用 :before 和 :after 选择器。完全可扩展。感谢所有的答案。 https://jsfiddle.net/VileTouch/0exLthpq/3/

Answer 1

而不是使用 <hr /> ，在很多情况下并没有像预期的那样运行，只需使用 <div>宽度为 1px 或 2px，并将背景应用于该 div。在这种情况下，您需要将它向左浮动以将它与其他元素一起“放入网格中”并考虑它占用的空间。

<hr />的边框实际上是彩色的(默认情况下)，而不是通过颜色:或背景:。此外，还有大量特定于浏览器的内容您必须覆盖，例如阴影。

当您想要更多自定义样式时，Divs 会更像您期望的那样。

如果你想花哨一些，你可以在列本身上使用 :after 元素，但这是一个全新的 CSS 类(class)。