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

Question

Вот мое исходное изображение:

И мое исходное изображение увеличено:

Любые мысли о том, каксделать это только с CSS3?Обратите внимание на небольшое кровотечение вверх в элемент.

Answer 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];

Answer 2

Это просто использование двух теней, одна из которых вставлена, а другая - как:

.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/

Answer 3

Это на самом деле делается с двумя CSS3 box-shadow с.

CSS:

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

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

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

Answer 4

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

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

Answer 5

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

Answer 6

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

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

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

Answer 7

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

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

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