Скругленные углы в css расположении ячейки таблицы?
Доступ к крупным данным.
чистый размер и масштаб данных, которые мы имеем в наличии в эти дни, значительны по сравнению с тем, что это раньше было в 80-х. Мы должны были сделать большое количество изменений в обоих наших аппаратных и программных обеспечениях, чтобы быть в состоянии сохранить и отобразить этот материал. Однажды, мы на самом деле изучим, как квалифицировать и взорвать его для чего-то полезного. Когда-нибудь.
Paul.
6 ответов
В соответствии с моим комментарием выше я решил использовать CSS3 border-radius для решения моей проблемы. Используя приведенные ниже инструкции, он покажет округлые границы во всех браузерах, кроме Internet Explorer. Меня не особо интересует IE, поэтому пользователи IE могут просто смотреть на прямые углы.
.box {
display: table-cell;
width: 16em;
padding: 1em 2em;
background: #f6c75d url(gradient.png) repeat-x scroll top left;
border: 3px solid #de9542;
border-radius: 25px; /* Standard */
-o-border-radius: 25px; /* Opera 10.x */
-moz-border-radius: 25px; /* Mozilla/Firefox */
-icab-border-radius: 25px; /* iCab */
-khtml-border-radius: 25px; /* KHTML/Konqueror */
-webkit-border-radius: 25px; /* Webkit/Safari/Chrome/etcetera */
}
Выше gradient.png - это небольшое мозаичное изображение, которое обеспечивает градиент в верхней части окна.
Он отлично работает. . Это также упрощает разметку и CSS, а также уменьшает количество и размер необходимых мне фоновых изображений.
Есть решение, которое работает в Safari , Firefox и Chrome . Он не работает ни в IE, ни в Opera (насколько я тестировал - даже в 10.0b). Он использует свойство CSS3 border-image . Поскольку это функция, включенная в рабочий черновик, а не рекомендация, браузеры реализуют ее только со своими конкретными префиксами:
#boxes {
display: table;
border-spacing: 1em;
}
.box-row { display: table-row; }
.box {
width: 16em;
display: table-cell;
padding-right: 2em;
border-image: url(box.png) 6 8 6 8 stretch; // this line actually does not influence rendering in any engine
-o-border-image: url(box.png) 6 8 6 8 stretch;
-khtml-border-image: url(box.png) 6 8 6 8 stretch;
-icab-border-image: url(box.png) 6 8 6 8 stretch;
-webkit-border-image: url(box.png) 6 8 6 8 stretch;
}
При ее использовании вам действительно потребуется воссоздать фоновое изображение, но это мелочь.
Если вы не против добавить немного дополнительной разметки, вы можете добиться этого эффекта. Конечно, я на самом деле не сторонник раздувания кода, но если вы должны это сделать, вы можете дважды обернуть коробку и сделать так, чтобы нижние углы находились в одной из каждой оболочки. Установите высоту вашей внутренней оболочки с помощью display: table-cell , и вы должны быть золотыми.
Можно ли использовать свойство min-height в элементе box-body?
попробуйте установить для тела окна значение display: table-cell ? это может вынудить его отрендерить три прямоугольных тела на одинаковую высоту и заставить закругленные границы тоже опуститься вниз.
Я надеюсь, что вы дойдете до вас (я новичок в этих сообщениях на форуме) Для графического дизайнера «квадратность» HTML ужасна. Я знаю, что это не совсем исправление для HTML или CSS, поскольку это простое графическое решение. Но он отлично работает, и, поскольку это простое изображение в формате gif, оно не дает сбоев в браузерах. Обратной стороной является то, что это требует времени из-за проб и ошибок, и если вы измените количество содержимого в своей ячейке, вам, возможно, придется изменить изображение, используемое в качестве фона прямоугольника с закругленными углами.
Итак, с этим предостережением ...
Определите размер нужной ячейки таблицы, добавив текст и измерив ячейку, или посмотрев на размер изображения, если только изображение, в пикселях.
В графической программе создайте прямоугольник любого цвета ( скажите черный, если на сайте есть белый текст и т. д.) Этот прямоугольник является нижним слоем.
Создайте прямоугольник с закругленными углами, например, с толщиной линии 1 пиксель и БЕЗ цветом заливки (цвет линии может быть любым цветом, который вы выбираете, как и толщина банки ..), который находится НАД базовым прямоугольником с заливкой. В результате у вас будет сплошной квадрат с тонким контуром с закругленными углами.
Я делаю закругленный незаполненный прямоугольник на 10 пикселей меньше (xy), после чего могу расположить его на равном расстоянии над квадратом.
Экспортируйте это изображение, скажем, в формате GIF или JPEG.
На своем веб-сайте щелкните ячейку таблицы, в которой должен быть прямоугольник с закругленными углами, и установите его в качестве ФОНОВОГО изображения только для этой ячейки. Убедитесь, что ячейка такого же размера, как изображение, иначе она не поместится или не будет мозаикой ... Затем, поскольку это элемент BACKGROUND для ячейки, любое содержимое, текст или изображения, которые вы помещаете в ячейку, будут отображаться над фоновым изображением, создавая впечатление, будто у вас есть округленная ячейка таблицы.
Вы можете, если хотите, сделать прозрачное фоновое изображение путем экспорта исходного изображения в виде gif с прозрачностью (вы можете использовать PNG с прозрачностью Alhpa, которая имеет больше цветов, но я еще не уверен в полной поддержке браузером изображения PNG на веб-страницах) Просто выберите основной сплошной цвет фона, например черный, и добавьте его как прозрачный цвет.
Вы можете захотеть прозрачности, если у вас есть фоновое изображение с использованием CSS для всей страницы, но будьте осторожны, в зависимости от изображения в использования, это может затруднить чтение текста.
Надеюсь, это поможет.