CSS: как я могу добавить тень на ярлык или коробку

Question

У меня есть кнопка, такая же, как Ask Question на SO, и вот CSS для нее:

.rfs .grey_btn{
   float: right;
   margin: 15px 5px;
}

Теперь я должен добавить к ней тень от границы, и я попробовал border-radius и boxтень, но это не дает мне должного результата.

Также другой вопрос заключается в том, что у меня есть надпись или поле, и теперь я хочу увеличить размер этого поля, чтобы я мог переместить текст внутри этого поля вправо, в настоящее время, если я перемещу его вправо, чем ондостигает конечного предела блока, поэтому я хочу увеличить размер блока, чтобы можно было толкать текст вправо.

Надеюсь, я прояснил свой вопрос.Любое руководство будет высоко ценится.

Спасибо.

Answer 1

Свойство box-shadow пока широко не поддерживается, но может быть реализовано следующим образом:

img {
    -webkit-box-shadow: 5px 5px 10px #666;
    -moz-box-shadow: 5px 5px 10px #666;
    box-shadow: 5px 5px 10px #666;
}

Не уверены, что вы спрашиваете о метке / коробке?

Answer 2

Box-Shadows работают только в некоторых современных браузерах, поскольку они являются свойствами CSS3. Как правильно их использовать, вы можете посмотреть здесь: http://www.css3.info/preview/box-shadow/

Вы можете использовать фоновое изображение для эффекта тени или второй тег (например, span) с рамкой, но это очень уродливое решение.

Для вас вопрос метки: пытались ли вы добавить «pagging-left», который сместит ваш текст в правую сторону и увеличит ширину метки?

РЕДАКТИРОВАТЬ : Поскольку CSS3 не является окончательным, каждый браузер имеет свое собственное псевдо-css3-свойство. Добавляя тень и дополнительную ширину и пространство к кнопке SO, вы можете использовать эти свойства CSS в современных браузерах:

.nav a {
    -khtml-box-shadow: 10px 10px 5px #888888;
    -webkit-box-shadow: 10px 10px 5px #888888;
    -moz-box-shadow: 10px 10px 5px #888888;
    box-shadow: 10px 10px 5px #888888;
    padding-left: 35px;
}

РЕДАКТИРОВАТЬ : добавлен CSS для браузеров Safari и KHTML. Это приведет к чему-то вроде этого: Кнопка SO http://i45.tinypic.com/dpcnwz.png

Answer 3

.rfs .grey_btn
{
    -webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
     -khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
       -moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
         -o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
            box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}