Создание нечеткой границы в CSS 3

Ответ 1

Обновление: Я удалил префиксы поставщиков, так как почти каждый браузер, который поддерживает эти свойства, не нуждается в них. Отбрасывание их считается лучшей практикой на данный момент.

См. страницу Caniuse для border-radius и box-shadow.

лучший (и единственный) способ сделать это - использовать несколько теней для коробок:

element {
    box-shadow: rgba(0,0,0,0.2) 0px 2px 3px, inset rgba(0,0,0,0.2) 0px -1px 2px;
    border-radius: 20px;
}

box-shadow работает следующим образом:

box-shadow: [direction (inset)] [color] [Horizontal Distance] [Vertical Distance] [size]; 

border-radius работает следующим образом:

border-radius: [size];

/*or*/

border-radius: [topleft/bottomright size] [topright/bottomleft size];

/*or*/

border-radius: [topleft] [topright] [bottomright] [bottomleft];

вы можете указать высоту длины кривой следующим образом:

border-radius: [tl-width] [tr-width] [br-width] [bl-width] / [tl-height] [tr-height] [br-height] [bl-height];

Ответ 2

Это делается с помощью двух CSS3 box-shadow s.

CSS

#fuzz
{
    height: 100px;
    width: 100px;
    border-radius: 5px;
    border: 1px solid #333;
    box-shadow: 0px 0px 5px #333, inset 0px 0px 2px #333;
}

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

Очевидно, измените цвета на свой вкус:)

Ответ 3

Это просто использование двух теней коробки, одной вставки и другого начала, т.е.

.box {
  width: 100px;
  height: 100px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 -3px 3px rgba(0,0,0,0.1);
  border: solid #ccc 1px;
  border-radius: 10px;
  margin: 50px 0 0 50px;
}

Смотрите здесь: http://jsfiddle.net/WYLJv/

Ответ 4

Посмотрите на border-radius css3. Он имеет опции для цвета смещения x и y и радиуса размытия. В вашем случае серый цвет не смещается и размывается, если 4px должны работать.

Ответ 5

Я немного опаздываю, но да, используйте радиус границы и тень (-ы) коробки, и вам должно быть хорошо идти.

.block {
  border-radius:6px;
  box-shadow: inset 0px 0px 2px 2px #aaa, 3px 3px 5px 0px #eee;
}

Ответ 6

Попробуйте добавить радиус границы и текстовую тень в свой CSS.

.box {
    border-radius:20px;
    text-shadow:2px 2px black;
}

Надеюсь, что это поможет.

Ответ 7

Вероятно, вы можете просто уйти с установкой границы на светлый цвет и набросок на более темный цвет, а затем просто установите радиус границы. Примечание. Я не тестировал это, и если память служит контуром, это не кривая с радиусом границы. Также обратите внимание, что радиус границы требует, чтобы несколько атрибутов были настроены на совместимость между браузерами. Для получения дополнительной информации см. http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/.

Если это не удается, вы всегда можете использовать внутренний-div, который вы устанавливаете в положение абсолютное, левое 0, правое 0, верхнее 0 и нижнее 0, а затем используйте это как внутреннюю, так и внешнюю границу. Установка граничного радиуса определенно будет работать.

С уважением, Ричард