I need to create a gradient border around the text within my page, I have four columns and I need the border to go around the outside and inside of the columns and be the same width.
For example I have added an image:
The border needs to be the same as above.
This is the HTML I am using below, the problem so far is that where the columns join the borders are adding both borders to it and border-left:none;
does not work. I also need to know if this is the best way to do this, and other ways.
<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>
Gradient borders or not (yet) widely supported. The easy solution here would be to add a wrapper div with the gradient, and give each column div a background color to mask the background of the wrapper. Something like this:
<div class='wrapper'>
<div class='col'>...</div>
<div class='col'>...</div>
<div class='col'>...</div>
<div class='col'>...</div>
</div>
and the 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;
}
To see a live example: http://jsfiddle.net/Pevara/6vDmH/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.