CSS列規則樣式？

好吧，所以基本上我試圖對列規則應用漸變，但結果並非如預期的那樣。CSS列規則樣式？

也許我錯過了什麼？

.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/

好了，這是怎麼結束了。沒有列規則和使用：之前和之後：選擇器之後。完全可擴展。感謝所有的答案。 https://jsfiddle.net/VileTouch/0exLthpq/3/

來源

2016-03-10 VileTouch

什麼是你期待？ –

我的意思是，當然，我可以擺脫列的屬性（和他們的供應商前綴！），並使用hr來代替，但hr不會接受100％的高度值，（這意味着它不會縮放），所以...是的，我很確定我錯過了一些東西。 – VileTouch

而不是使用<hr />，但是卻沒有如預期在很多情況下，只需使用一個<div>用1px的或2px的寬度和背景應用於該分區。在這種情況下，您需要將其左移以將其與您的其他元素「放入網格中」，並佔用它佔用的空間。

<hr />實際上它們的邊框是彩色的（默認情況下），而不是通過顏色或背景:.另外，還有一大堆你必須重寫的瀏覽器特有的東西，比如陰影。

當您想要更多的自定義樣式時，Divs會更像您所期望的。

如果你想變得很花哨，你可以在列上使用after元素，但這是一個全新的CSS課程。

來源

2016-03-10 09:32:24 tayvano

因此，不可能在[spec]的（有限）範圍之外設置[column property]（http://www.w3schools.com/cssref/css3_pr_column-rule.asp）？ – VileTouch

老實說，我避免列屬性，因爲它是不穩定的瀏覽器支持，所以我不完全知道。有了像柱子和小時鐘之類的東西，你要麼像它想要的樣式，要麼設計別的東西，像你期望的那樣，或者你把頭撞在牆上。在這種情況下，您似乎希望3列具有漸變分隔符。我會通過網格和div作爲分隔符來處理你想要的所有CSS。 – tayvano

看起來像這就是我將不得不做的......太糟糕了，因爲列看起來像一個非常好的主意（文本動態地溢出到不同的列）......如果只是它更靈活。 – VileTouch

嘗試使用不同的div而不是列規則。

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>

- >plunker with div

來源

2016-03-10 10:45:31 theoretisch

CSS列規則樣式？

回答

相關問題