Как создать гибкие закругленные углы?

Question

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

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

Большое спасибо

Answer 1

Ну, самый простой ответ: используйте CSS3:

#roundedCornerDiv {
    -moz-border-radius: 1em;     /* for mozilla-based browsers */
    -webkit-border-radius: 1em;  /* for webkit-based browsers */
    border-radius: 1em;          /* theoretically for *all* browsers
                                    dependant on implementation of CSS3 */
    border: 12px solid #ccc;
}

Answer 2

Вы должны быть в состоянии сделать это с 9 явно выраженными и плавающими div. угловые элементы имеют фиксированный размер и имеют background-url для 4 углов, а боковые элементы имеют повтор-у, а верхние нижние имеют повтор-х

Answer 3

border-radius: 10px 10px 10px 10px;

первый - левый верхний угол. Второй - это правый верхний угол. третий правый нижний угол. четвертый - левый нижний угол.

Вы можете использовать это в основном в любом теге, где вы хотите, чтобы закругленные углы. просто не забудьте указать границу как:

border: 2px solid black;

если вы укажете границу отдельно, например:

border-left: 6px;
border-right: 6px;
border-top: 2px;
border-bottom: 2px;

Вы можете получить что-то потрясающе выглядящее.

Answer 4

Вы должны посмотреть на подход Thrashbox для этого.

Answer 5

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

div {
    background: white url(topleft.gif) top left no-repeat;
}

div span {
    display: block;
    background: url(topright.gif) top right no-repeat;
}

div span span {
    background: url(bottomright.gif) bottom right no-repeat;
}

div span span span {
    padding: 2em;
    height: 0; /* fixes a padding bug in IE */
    background: url(bottomleft.gif) bottom left no-repeat;
}

div span span > span {
    height: auto; /* sets the height back to auto for all other browsers */
}

А теперь для HTML:

<div><span><span><span>Round corners!</span></span></span></div>

Действительный пример и код см. На этой странице , где приведен рабочий пример и исходный код.