[英]Creating a gradient border with the same width around each column in CSS
我需要在頁面中的文本周圍創建一個漸變邊框,我有四列,我需要邊框圍繞外部和列內部並且寬度相同。
例如,我添加了一個圖像:
邊界需要與上面相同。
這是我在下面使用的HTML,到目前為止的問題是列連接邊框的位置是向它添加邊框和border-left:none;
不起作用。 我還需要知道這是否是最好的方法,以及其他方式。
<html>
<head>
<style>
.border{
padding: 15px 20px;
border-top: 20px solid #000;
border-bottom: 20px solid #FF0000;
<!--margin: 40px auto;-->
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#FF0000));
background-image: -webkit-linear-gradient(#000, #FF0000);
background-image:
-moz-linear-gradient(#808, #FF0000),
-moz-linear-gradient(#000, #FF0000)
;
background-image:
-o-linear-gradient(#000, #FF0000),
-o-linear-gradient(#000, #FF0000)
;
background-image:
linear-gradient(#000, #FF0000),
linear-gradient(#000, #FF0000)
;
-moz-background-size:17px 100%;
background-size:20px 100%;
background-position:0 0, 100% 0;
background-repeat:no-repeat;
}
#primary {
float: left;
width: 200px;
}
#content {
float: left;
width: 200px;
}
#secondary {
float: left;
width: 250px;
}
#third {
float: left;
width: 250px;
}
</style>
</head>
<body>
<div id="primary" class="border">
<p>Column information</p>
</div>
<div id="content" class="border">
<p >Column information</p>
</div>
<div id="secondary" class="border">
<p >Column information</p>
</div>
<div id="third" class="border">
<p >Column information</p>
</div>
</body>
</html>
是否廣泛支持漸變邊界。 這里簡單的解決方案是添加一個包含漸變的包裝器div,並為每個列div提供一個背景顏色來掩蓋包裝器的背景。 像這樣的東西:
<div class='wrapper'>
<div class='col'>...</div>
<div class='col'>...</div>
<div class='col'>...</div>
<div class='col'>...</div>
</div>
和css:
.wrapper {
float: left; /* no need to be wider then the content */
overflow: hidden; /* clearfix */
padding: 10px 10px 0 0; /* no padding left / bottom, the margin left on the cols takes care of that */
background: linear-gradient(to bottom, #ff3232 0%,#000000 100%); /* don't forget to add prefixes here */
}
.col {
width: 150px; /* just some width, any number will do */
float: left; /* make them appear as columns */
margin: 0 0 10px 10px; /* same margin as the padding on the wrapper, but only left/bottom */
background-color: #fff; /* a color to mask the gradient */
padding: 5px;
}
要查看一個實例: http : //jsfiddle.net/Pevara/6vDmH/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.