Как сделать раскладку за углом чистого CSS и HTML?
Совместимым и наиболее удобным способом?
7 ответов
Чистый CSS и HTML? (при условии, что вы не имеете в виду использование изображений для углов или фонового изображения....)
ряд браузеров поддерживают округленные границы, например
-moz-border-radius
-webkit-border-radius
border-radius
Однако ни один из них не работает в IE
(См. Ответ Джеффа здесь и комментарии.)
На данный момент закругленные углы поддерживаются в Firefox и Safari через расширение браузера
закругленный угол является частью спецификации CSS3, поэтому, если вы хотите реализовать закругленный угол, используя чистый CSS и HTML, это возможно только с помощью расширений браузера (-moz-border-radius для Firefox -webkit для safari)
вы также можете достичь того же с помощью плагинов JavaScript
Не помню, где я нашел эту технику, но на этой странице перечислено несколько похожих решений:
<html>
<head>
<title>hm</title>
<style type="text/css" media="screen">
body{
background:#000;
}
.heading{
color:#1d4b76;
padding-top:1em;
width:10em;
text-align:center;
}
.heading h2 {
font-size:2em;
padding:.2em;
margin:0;
background-color:#1e1e1e;
}
/* Rounded header */
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #1e1e1e}
b.r1{margin: 0 5 0 5px}
b.r2{margin: 0 2 0 3px}
b.r3{margin: 0 1 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 0 0 1px; height: 2px; background:#1e1e1e;}
</style>
</head>
<body>
<div class="heading">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h2>Example!</h2>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
Для сайта, на котором я использовал это, я удалил правые поля, чтобы использовать их для выравнивания по правому краю (b.r1{margin: 0 0 0 5px} и так далее):
http://kalsey.com/2003/07/rounded_corners_in_css/
Хотя использует 4 маленьких изображения
Вы можете использовать правила CSS3:
- -khtml-border-radius: 5px; / * для Konqueror (браузер Linux) * /
- -moz-border-radius: 5px; / * для любой версии Firefox * /
- -webkit-border-radius: 5px; / * для Safari и Google Chrome */
- радиус границы: 5 пикселей; / * для браузеров, которые поддерживают CSS3 */
Если изображения разрешены, сделайте 4 угла в графической программе по вашему выбору, сделайте это фоновым изображением некоторых тегов span/div и выровняйте их должным образом с помощью позиции:absolute; в контейнере, который установлен в положение: относительный;. Если вы хотите использовать только CSS, вы можете сделать то же самое, но вместо выбора фонового изображения необходимо установить каждый пиксель. В углу 5 на 5 примерно 10-12 тегов. Другими словами, около 40 на панель, что может привести к накладным расходам в 1 (CSS)+1(div/span)K байтов для одной панели. Хотя лично я бы не стал использовать этот подход, он возможен и, вероятно, будет работать в большинстве браузеров.
Привет, мне недавно пришлось преодолеть ту же проблему, виджет с изменяемыми размерами и закругленными углами, внутреннюю границу, тень и градиентный фон. Он также должен работать во всех браузерах (включая IE6).
Если вы используете фотошоп и правильно присматриваете за исходными файлами, это довольно просто. Всего требуется 4 изображения (до 7 в зависимости от того, как вы поддерживаете IE6), все они могут быть вырезаны из исходного файла Photoshop, так что это довольно просто.
Проверьте ссылку ниже.
http://thatguynamedandy.com/blog/css-widget-rounded-corner-gradient-drop-shadow