Изогнутый угол границы для дел

Question

Мне нужно создать div с изогнутой угловой границей, без использования каких-либо изображений в углу. Возможно ли это?

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

Answer 1

Если вы хотите использовать браузеры Webkit и Mozilla, вы можете использовать следующие команды CSS:

.radius {
-moz-border-radius: 6px;
-webkit-border-radius:6px;
border-radius: 6px;
    }

Подробности можно посмотреть здесь .

информацию о CSS-радиусе границы CSS2 можно найти здесь

Это, к сожалению, не работает, т.е.

Вы могли бы пройти путь JavaScript для IE только с помощью niftycube , что дает дополнительное преимущество безошибочной поддержки выравнивания высоты столбца.

Answer 2

http://www.curvycorners.net/

Попробуйте эту библиотеку, она сделала чудеса для меня! Это проверенное кросс-браузерное решение.

Answer 3

Вы можете использовать CSS для достижения закругленных углов в современных браузерах ...

border-radius: 10px;

Handy Generator

Это известно как прогрессивное улучшение . IMO, это лучше, чем изображения и трюки CSS с полями и границами. Если вы не должны иметь закругленные углы.

Answer 4

Я бы использовал плагин jQuery для обработки закругленных углов. Вот список доступных плагинов с закругленными углами на сайте jQuery: http://plugins.jquery.com/taxonomy/term/189

Answer 5

Вот тот, который я написал, который вы можете использовать, если вам это нравится. Он отображает прямоугольник с закругленными углами любых размеров с цветом фона, но не с рамкой вокруг всего прямоугольника. Он предназначен для фона белой страницы, но его можно изменить, отредактировав цвет границы в стилях c1, c2 и c3.

.rounded {background-color:#f1f0f1}
.rounded .inner {padding:8px 10px 8px 12px}
.rounded .c1 {height:1px;line-height:1px;font-size:1px;border-width: 0px 4px 0px 4px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c2 {height:1px;line-height:1px;font-size:1px;display:block;border-width: 0px 2px 0px 2px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c3 {height:2px;line-height:1px;font-size:1px;display:block;border-width: 0px 1px 0px 1px;border-color:#FFFFFF;border-style:solid;padding:0px}


   <div class="rounded" style="width:200px;height:100px">
    <div class="c1"></div><div class="c2"></div><div class="c3"></div>
        <div class="inner">
        -- Content Here --
        </div>
        <div class="c3"></div><div class="c2"></div><div class="c1"></div>
   </div>