CSS затухает сверху и снизу "границы"

Взгляните на это: http://jsfiddle.net/wjhnX/

Я достиг этого с помощью этого CSS:

background-image: radial-gradient(#CCC, #FFF), radial-gradient(#CCC, #FFF);
background-size:    2px 100%;
background-position: 0 0, 100% 0;
background-repeat:  no-repeat;

Можно ли это сделать, но имитированные границы будут сверху и снизу, а не слева и справа?

Спасибо заранее!

Ответ 1

Вам нужно что-то вроде этого?

Демонстрация (Некоторые места для вашего контента, я использовал margin, просто убедитесь, что он будет применяться к оба, :before, а также :after, поэтому, если вы хотите отделить, объявите маржу отдельно для каждого, ps - я сделал цвета lil lighter)

/* Using only background gradients */

.one { 
    width: 400px;
    padding: 20px 25px;
    margin: 40px auto;
}

.one:before, .one:after {
    content: "";
    height: 1px;
    /* I've removed the vendor prefixes, if you are looking to support older browsers
       then refer to older version of this answer.
    */
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
}

Объяснение: Я использовал :before и :after pseudo с content: "", поэтому он создает блок, вы можете сказать, что виртуальный блок внутри элемента... и который далее установлен в display: block, просто убедитесь, что вы используете block в противном случае поля и height не будут иметь никакого эффекта.. и последнее, но не менее, использование градиентов с помощью rgba для управления альфа-прозрачностью градиента, который будет исчезать с обоих концов.

Ответ 2

вы можете сделать это и с seperator.

LIVE DEMO

.seperator
{
    width: 400px;
    height: 2px;
    margin: 30px;
    background-image: radial-gradient(#CCC, #FFF), radial-gradient(#CCC, #FFF);
    background-position: 0, 100%, 0, 100%;
}

.one { 
    width: 400px;
    height: 140px;
    margin: auto;
}