CSS округлые углы -- html поле с участием css пол Связанный проблема

CSS Rounded corners


15
vote

проблема

русский

Я видел много кодов для этого, но кажется, что он не работает очень хорошо или вообще. Я использовал картинки для округлых углов, но мне нужен код, так что он охватит границу <table> . Единственными решениями, которые я нашел для этой проблемы, должны иметь изображения в ячейках вокруг границы. Что-нибудь еще, что я могу попробовать?

Английский оригинал

I've seen a lot of codes for this but it appears non of them work very well or at all. I've used pictures for rounded corners but I need the code so that it will round the border of a <table>. The only solutions I've found for this problem are to have images In the cells around the border. Anything else I can try?

</div
     

Список ответов

26
 
vote
vote
Лучший ответ
 

попробуйте:

 <код> selector {     -moz-border-radius: 3px;     -webkit-border-radius: 3px;     border-radius: 3px; }   

Это будет работать в Firefox, Safari, Chrome и любом другом CSS3-совместимом браузере. Может быть легче сделать отдельным классом для этого - есть 3 заявления, которые необходимы для полной совместимости.

Также попробуйте Здесь (cssjuice.com) Для некоторых более техники с использованием изображений.

Я не совсем уверен, будет ли это работать со столом, но если вы в полном управлении - не используйте <код> <table> для макета. Пожалуйста.

(Примечание. Я думаю, что это нормально использовать тег таблицы для табличных данных, не так, как следует использовать divs.)

<Сильное> Обновление : Чтобы применить только к одному углу:

 <код> -moz-border-radius-topleft: 3px; /* ... */ -webkit-border-top-left-radius: 3px;   

Продолжить для <код> topright или <код> top-right .

 

Try:

selector {     -moz-border-radius: 3px;     -webkit-border-radius: 3px;     border-radius: 3px; } 

This will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. It may be easier to make a separate class for this - there are 3 statements which are needed for full compatibility.

Also, try here (cssjuice.com) for some more techniques using images.

I'm not completely sure whether this will work with a table, but if you're in complete control - don't use a <table> for layout. Please.

(Note - I think its fine to use the table tag for tabular data, just not where DIVs should be used.)

Update: to apply to one corner only:

-moz-border-radius-topleft: 3px; /* ... */ -webkit-border-top-left-radius: 3px; 

Continue for topright or top-right.

</div
 
 
         
         
5
 
vote

Попробуйте селекторы CSS 3:

 <код> .element {     border-radius:5px }   

для Safari, Google Chrome (WebKit) и Mozilla, используйте следующие два селектора (хотя Mozilla поддерживает селектор CSS 3, не уверен, что делает другой):

 <код> .a { background-image(a.png) } .b { background-image(b.png) } .a.b { background-image(ab.png) } 0  
 

Try the CSS 3 selectors:

.element {     border-radius:5px } 

For Safari, Google Chrome (Webkit) and Mozilla, use the following two selectors (although Mozilla supports the CSS 3 selector, not sure if the other one does):

.element {     -webkit-border-radius:5px;     -moz-border-radius:5px; } 
</div
 
 
1
 
vote

Единственный способ иметь поддержку для всех браузеров - использовать фоны изображения на якорных тегах, обычно в сочетании с изображением на ней контейнер.

Например, с HTML подобным:

 <код> .a { background-image(a.png) } .b { background-image(b.png) } .a.b { background-image(ab.png) } 1  

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

Есть функции CSS3 и решения JS, которые могут также работать, но не полностью перекрестные браузеры совместимы.

 

The only way to have support for all browsers is to use image backgrounds on the anchor tags, usually combined with an image on it's container tag as well.

For instance with HTML like this:

<ul>  <li><a href="">something</a></li> <ul> 

I would place one image on the anchor tag, and one on the li, so that the element can be variable width and still have rounded corners.

There are CSS3 features and JS solutions that may also work, but are not completely cross browser compatible.

</div
 
 
1
 
vote

Вы можете включить их через CSS, но только для Поддерживаемые браузеры . < / P >.

Ваши другие параметры неизображения являются на основе сценариев, такие как jQuery corners или подобный скрипт.

Оба эти методы имеют предостережения (т. Е. Поддержка, посетителей с JavaScript отключены и т. Д.). Если вы установитесь на их использовании, я бы сосредоточился на том, чтобы заставить их работать с CSS в браузерах, которые его поддерживают и просто убедитесь, что он выглядит приемлемым без них в IE.

 

You can round them through CSS but only for supported browsers.

Your other non-image options are script-based like jQuery Corners or a similar script.

Both of these methods have caveats (IE support, visitors with JavaScript disabled, etc.). If you're set on using them, I would focus on getting them to work with CSS in the browsers that support it and just make sure that it looks acceptable without them in IE.

</div
 
 
 
 
0
 
vote

Если вам не нужно работать со всеми браузерами, рассмотрите возможность использования пограничного радиуса. Смотрите http://www.css3.info/preview/rounded-border/ для дополнительной информации. Новые браузеры на основе Mozilla и WebKit поддерживают либо этот тег, либо Moz-граничный радиус и -webkit-border-Radius.

 

If you don't have to work with all browsers, consider using border-radius. See http://www.css3.info/preview/rounded-border/ for more information. Newer Mozilla and Webkit-based browsers support either this tag or moz-border-radius and -webkit-border-radius.

</div
 
 
0
 
vote

Вот способ, который не зависит от браузера (я знаю, о чем я знаю, он работает на популярных браузерах.) Это не использует таблицу, поэтому вам придется поставить стол в наиболее глубоко вложенном Div И это длинно и тяжело, но это работает. Изображения, упомянутые в коде ниже, являются закругленными углами, которые вы нарисуете себя. Радиус угла 44PX.

Это вариация на: http://www.webcredible.co.uk/user-friend-resources/css/css-round-corners-boxes.shtml

 <код> <div class="tl">     <div class="tr">         <div class="bl">             <div class="br">                 <div class="t">                     <div class="b">                         <div class="l">                             <div class="r">                                 <div>Do or do not, there is no try</div>                             </div>                         </div>                     </div>                 </div>             </div>         </div>     </div> </div>  .tl {     font-family: Verdana, Arial;     font-size: 16px;     position: relative;     left: 30px;  }  .tl, .tr, .bl, .br {     width: 655px;     height: 250px; }  .t {     width: 567px;     height: 250px;         margin: 0 0 0 44px; }  .b {     width: 567px;     height: 250px;     }  .l {     width: 655px;     height: 162px;         margin: 44px 0 0 -44px;  }  .r {     width: 655px;     height: 162px;  }  .bl {     background: url(/images/front/rcbla.png) 0 100% no-repeat; }  .br {     background: url(/images/front/rcbra.png) 100% 100% no-repeat; }  .tl {     background: url(/images/front/rctla.png) 0 0 no-repeat; }  .tr {     background: url(/images/front/rctra.png) 100% 0 no-repeat; }   .t {     background: url(/images/front/adot.png) 0 0 repeat-x; }  .b {     background: url(/images/front/adot.png) 0 100% repeat-x; }  .l {     background: url(/images/front/adot.png) 0 0 repeat-y; }  .r {     background: url(/images/front/adot.png) 100% 0 repeat-y; }   
 

Here is a way that isn't browser dependent (that I know of, it works on the popular browsers.) It doesn't use a table, so you'll have to put the table in the most deeply nested div and it is lengthy and heavy, but it works. The images referred to in the code below are the rounded corners you draw yourself. The radius of the corner is 44px.

This is a variation on: http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml

<div class="tl">     <div class="tr">         <div class="bl">             <div class="br">                 <div class="t">                     <div class="b">                         <div class="l">                             <div class="r">                                 <div>Do or do not, there is no try</div>                             </div>                         </div>                     </div>                 </div>             </div>         </div>     </div> </div>  .tl {     font-family: Verdana, Arial;     font-size: 16px;     position: relative;     left: 30px;  }  .tl, .tr, .bl, .br {     width: 655px;     height: 250px; }  .t {     width: 567px;     height: 250px;         margin: 0 0 0 44px; }  .b {     width: 567px;     height: 250px;     }  .l {     width: 655px;     height: 162px;         margin: 44px 0 0 -44px;  }  .r {     width: 655px;     height: 162px;  }  .bl {     background: url(/images/front/rcbla.png) 0 100% no-repeat; }  .br {     background: url(/images/front/rcbra.png) 100% 100% no-repeat; }  .tl {     background: url(/images/front/rctla.png) 0 0 no-repeat; }  .tr {     background: url(/images/front/rctra.png) 100% 0 no-repeat; }   .t {     background: url(/images/front/adot.png) 0 0 repeat-x; }  .b {     background: url(/images/front/adot.png) 0 100% repeat-x; }  .l {     background: url(/images/front/adot.png) 0 0 repeat-y; }  .r {     background: url(/images/front/adot.png) 100% 0 repeat-y; } 
</div
 
 
 
 
0
 
vote

Я предполагаю, что округлые угловые CSS выше не будут работать в IE6. То, что вы можете помнить.

Три штабелированные Divs с фоновыми изображениями - самый простой подход.

 <код> <div class="top">&nbsp;</div> <div class="mid"> <!-- content --> </div> <div class="bottom">&nbsp;</div>   

Фон для вашего div с идентификационным средством будет вертикально плиткой через CSS. Работает в IE6.

 

I'm assuming that rounded corner CSS above wouldn't work in IE6. Something you may want to keep in mind.

Three stacked divs with background images is the easiest approach.

<div class="top">&nbsp;</div> <div class="mid"> <!-- content --> </div> <div class="bottom">&nbsp;</div> 

The background for your div with id mid would be vertically tiled through CSS. Works in IE6.

</div
 
 
0
 
vote

Я склонен идти с border-radius Option Person-B, покрытый ранее.

Если я абсолютно придется поддерживать IE (т.е. это фундаментальная часть дизайна, а не просто небольшое улучшение), у меня было несколько успехов с dd_roundies , который использует VML, чтобы выполнить задание.

 

I tend to go with the border-radius option person-b covered earlier.

If I absolutely have to support IE (i.e. it's a fundamental part of the design and not just a little enhancement), I've had some success with dd_Roundies, which makes use of VML to get the job done.

</div
 
 

Связанный проблема

0  Как вы используете PHP и SQL для отправки данных таблицы на другую таблицу  ( How do you use php and sql to submit table data to another table ) 
У меня есть таблица полетов, и я использую цикл, чтобы распечатать информацию о рейсах, наряду с кнопкой отправки, кнопка, которая нажала, - это представленны...

0  Как сделать левую и правую границу карты в ионном прозрачном  ( How to make the left and right border of a card in ionic transparent ) 
Ниже приведен мой HTML. У меня в общей сложности 3 карты в трех столбцах и хотите только левую и правую сторону быть прозрачными. Я пробовал устанавливать гра...

4  Как генерировать документ Word (DOC, DOCX) в ASP.NET? [закрыто]  ( How to generate word documentdoc docx in asp net ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> закрыт . Этот вопрос должен быть больше Фокусированный . В настоя...

2  SMTPClient отправляет RAW HTML  ( Smtpclient sending raw html ) 
Может ли кто-нибудь сказать мне, почему следующий код отправляет электронные письма в Raw HTML? Как в, электронная почта выглядит когда вы просматриваете исто...

0  Скачать изображение из результатов API  ( Download image from api results ) 
Я создаю приложение, которое использует онлайн API для рерантива изображений на основе ключевого слова для поиска. Я запускаю петлю Foreach для рендеринга 12 ...

1  Как я могу сделать пользовательский сортировку на следующем HTML-таблице, заставляя некоторые ряды всегда кажутся под другими?  ( How can i do a custom sort on the following html table forcing some rows to alw ) 
У меня есть следующие данные для списка задач: У меня есть <код> HTML Таблица, отображаемая эти данные, в настоящее время отсортировано по имени задачи ...

0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC?  ( How to close popup when youtube video is playing on esc button button ) 
Нажмите меня, чтобы увидеть демонстрацию Когда видео не играет, то кнопка ESC нажала всплывающее окно, но он не работает при воспроизведении видео. ...

1  JavaScript не работает над динамическим контентом  ( Javascript not working on dynamic content ) 
У меня есть страница, где в HTML Div загружен с другой страницы. На родительской странице у меня есть JavaScript, который имеет элементы, которые применяются ...

3  Есть ли способ различить связь против мышиных взаимодействий в Windows 8 (HTML / JS)  ( Is there any way to distinguish touch vs mouse interactions in windows 8 html ) 
Я в настоящее время строю приложение, которое имеет много внимания на панорамирование, которое выглядит и чувствует себя красиво, когда касается и манипулируе...

1  Как проверить отметку Check Column в сетке?  ( How to check mark a check column in a grid ) 
У меня есть флажок Check Column на сетке, которая мне нужна для программически проверки. Вот как сценарий Check Column: <код> columns: { items:[ ...

0  Как я могу отобразить вывод каждого цикла на петле «для»?  ( How can i display the output of each loop on a for loop ) 
Я общий новичок, и я работаю над «простыми числами» рисованием / анимацией с помощью HTML5 Canvas и JS. Мне трудно с помощью петли «Для», потому что браузер о...

-2  Как вы можете центрировать галерею с HTML и CSS  ( How can you center a gallery with html and css ) 
Я выхожу новый HTML и CSS и надеюсь, что кто-то может помочь. с помощью W3 Schools ( http://www.w3schools.com/css/css_image_gallery. ASP ) Я создал простую ...

0  всплывающее окно не назначает центр экрана  ( Popup not assign the center of the screen ) 
У меня есть код ниже, чтобы назначить всплывающую точный центр экрана. Но это не работает. Всплывающее окно появляется в разных местах, основанных на размере ...

-1  Как схватить значение флажки как целое число и не строку? [Дубликат]  ( How to grab checkbox value as integer and not string ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

0  .append () элемент с более чем одним классом  ( Append element with more than one class ) 
Я не могу найти информацию о том, можно ли использовать .append (), чтобы добавить элемент в HTML и дать этому элементу более одного класса <код> $( ".nav"...

Связанный проблема

0  Как вы используете PHP и SQL для отправки данных таблицы на другую таблицу 
0  Как сделать левую и правую границу карты в ионном прозрачном 
4  Как генерировать документ Word (DOC, DOCX) в ASP.NET? [закрыто] 
2  SMTPClient отправляет RAW HTML 
0  Скачать изображение из результатов API 
1  Как я могу сделать пользовательский сортировку на следующем HTML-таблице, заставляя некоторые ряды всегда кажутся под другими? 
0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC? 
1  JavaScript не работает над динамическим контентом 
3  Есть ли способ различить связь против мышиных взаимодействий в Windows 8 (HTML / JS) 
1  Как проверить отметку Check Column в сетке? 
0  Как я могу отобразить вывод каждого цикла на петле «для»? 
-2  Как вы можете центрировать галерею с HTML и CSS 
0  всплывающее окно не назначает центр экрана 
-1  Как схватить значение флажки как целое число и не строку? [Дубликат] 
0  .append () элемент с более чем одним классом