在CSS中的每列周围创建具有相同宽度的渐变边框

Question

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; 这是我在下面使用的HTML，到目前为止的问题是列连接边框的位置是向它添加边框和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>

Answer 1

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. 这里简单的解决方案是添加一个包含渐变的包装器div，并为每个列div提供一个背景颜色来掩盖包装器的背景。 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: 和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/ 要查看一个实例： http ： //jsfiddle.net/Pevara/6vDmH/

在CSS中的每列周围创建具有相同宽度的渐变边框

问题描述

1 个解决方案

解决方案1
3 已采纳 2013-06-11 19:47:54

在CSS中的每列周围创建具有相同宽度的渐变边框

问题描述

1 个解决方案

解决方案1 3 已采纳 2013-06-11 19:47:54

解决方案1
3 已采纳 2013-06-11 19:47:54