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 />，只需使用宽度为1px或2px的<div>并将背景应用于该div 。在这种情况下，您需要将其向左浮动以将其放入网格中。与你的其他元素和占用空间。

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

当您需要更多自定义样式时，Div会更像您期望的行为。

如果你想获得幻想，可以在列本身上使用：after元素，但这是一个全新的CSS课程。

Answer 2

尝试使用不同的div而不是column-rule。

的CSS：

.g {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
padding-right: 8px;
padding-left: 8px;
position:absolute;
}

.g > div { background: #fff; }

#rechts{
  float: right;
  width:49%;
  height:100%;
    }
    #links{
      width:49%;
      position:absolute;
      height:100%;
    }

HTML：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="g">
    <div id="links">  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<div id="rechts">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
  </body>

</html>

- ＆GT; plunker with div

CSS列规则样式？

2 个答案: