Как использовать только CSS для раунда мои углы области тега Div?
Невозможно сделать его таким минималистичным. Все опции для встраивания видео перечислены здесь:
https://developers.google.com/youtube/player_parameters
Вы можете использовать такой онлайн-инструмент, как этот чтобы настроить все, что доступно, с более простым в использовании пользовательским интерфейсом:
6 ответов
Вы использовали бы свойство радиуса границы. Однако это только поддерживается в CSS3, который никакой браузер еще не реализует. Если бы Вам только нужен он для работы в паре браузеров, Вы могли бы использовать - радиус границы WebKit и-moz-border-radius, который позволил бы ему работать в Safari и Firefox соответственно.
Если Вы не настроены против использования изображений. Вот s метод, который я придумал для того, чтобы сделать округленные границы.
Вот простой документ HTML демонстрации, как достигнуть его только через CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}
</style>
</head>
<body>
<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="contentf">
Content Area Content Area Content Area Content Area Content Area Content Area
Content Area Content Area Content Area Content Area Content Area Content Area
Content Area Content Area Content Area Content Area Content Area Content Area
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
</body>
</html>
Свяжитесь с исходным: http://blog.yosle.com/2007/09/20/css-round-corners/
- moz-border-radius получит Вас скругленные углы во всех версиях Firefox. Более полезная информация в Ссылке CSS Sitepoint.
радиус границы получит Вас скругленные углы в Safari 3. Больше информации о радиусе границы в Спецификации CSS 3.
Спросите Google о "скругленных углах CSS никакие изображения", и Вы найдете многих, много примеров того, как сделать это.
Лично, мне нравится, когда методы на основе управления полями тянут кривую линию за линией, несмотря на уровень шума, который они производят в источнике страницы, потому что они являются самыми гибкими и могут потянуть любую форму края. Если Вы только интересуетесь фактическими скругленными углами (т.е. использование круговой дуги на 90 градусов), существует намного более компактное решение на основе некоторого обмана с тщательно расположенным маркером.
Если "только CSS" Вы имеете в виду "без JavaScript", затем можно, конечно, добавить фоновые изображения с круглыми углами к элементам. Вам, возможно, понадобится дополнительная разметка в этом случае в зависимости от того, в каком количестве гибкости Вы нуждаетесь.
Полагание, что Вы еще не можете использовать несколько фоновых изображений, я думаю с помощью единственного изображения, является лучшим только опция CSS.
Если можно использовать JavaScript, то можно хотеть проверить Изящный Угловой Куб. Я упоминаю это, потому что это работает даже сверху изображений и поддерживает прозрачность.
Существует учебное руководство в http://www.sitepoint.com/blogs/2005/08/19/dom-foolery-with-images/, который объясняет, как установить округленные границы в изображениях. Peharps это могло бы быть полезно для Вас начиная с изображения, установлен как фон отделения. Хотя необходимо будет использовать другие изображения и JavaScript. Код JavaScript может быть уменьшен при использовании JQuery. o/