закругление углов средствами CSS HTML

Powerslave · June 20, 2007

Задача: Закругление углов у картинки средствами CSS-HTML

Что есть: Есть картинки разных размеров, которые загружаются в статью.

Ньюансы:

1. Картинки разных размеров

2. Хотелось бы в див вставлять тег а не бекграундом

3. Некоторые картинки являются ссылками.

Те решения что я наш?л:

1. http://www.phpground.ru/forum/post-46.html. Делаем РОдительский див ставим ему размер изображения, ставим ему в бэкграунд само изображение. Внутри этого дива ещ? один див, с кусочками по углам.

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

3. Пример просто картинки с угалками http://recodes.ru/projects/some/

Вопрос: Как сделать проще и соблюсти "Ноьюансы" ? Заранее спасибо

Alexsays · April 8, 2010

<html>
<style>
.rtop, .rbottom{
display:block
border: 1px solid black;
}

.rtop *, .rbottom *{
display: block; 
height: 1px; 
overflow: hidden;
background:red;

}
.r1{
margin: 0 5px
}
.r2{
margin: 0 3px
}
.r3{
margin: 0 2px
}
.r4{
margin: 0 1px; height: 2px}
</style>
<div id="container">

<b class="rtop">
<b class="r1"></b> 
<b class="r2"></b> 
<b class="r3"></b> 
<b class="r4"></b>
</b>
<div style='background:red;'>yyyyy  </div>

<b class="rbottom">
<b class="r4"></b> 
<b class="r3"></b> 
<b class="r2"></b> 
<b class="r1"></b>
</b>

</div>

</html>

Товарисцщи! Помогите разобраться в данном коде, как менять размер и положение данного блока??? И возможно создать класс или стиль который бы сразу менял цвет блока и закругленных углов? Простите за нубость, пытаюсь овладеть css версткой, надеюсь на понимание и помощь.

Savitar · December 29, 2010

<style type="text/css">
.box {
	background: #e7e9da;
	padding: 0;
	width:90%;
	position: relative;
	margin:25px auto;
}
.tl, .tr, .bl, .br {
	height: 25px;
	width:25px;
	line-height: 0;
	background: url(http://i011.radikal.ru/1012/af/dec13d0df8c8.png) no-repeat right top;
	position:absolute;
	z-index:10;
	top:-25px; 
	left: 0%;
}
.bl {background-position: left -52px;top:100%; left: 0%;}
.tr {background-position: right -26px;width:25px;top:-25px; left: 100%; margin-left:-25px;}
.br {background-position: right -78px;width:25px;top:100%; left: 100%; margin-left:-25px;}
.content, .under{
	margin: 0 25px;
	padding:10px 25px;
	background: #e7e9da;
	position:relative;
	top:-25px;
	min-height:25px;
}
 .under{
	margin: 0 25px;
	height:25px;
	top:25px;
	padding:0;	
}

</style>
<div class="box">
	<div class="tl"></div>
	<div class="tr"></div>
	<div class="bl"></div>
	<div class="br"></div>
	<div class="content">

	</div>
	<div class="under"></div>
</div>

Способ с прозрачным фоном уголков.

Edited December 29, 2010 by Savitar

Shotgun · March 15, 2011

а чего темка прикреплена, сейчас уже все наверное знают border-radius

SelenIT · March 17, 2011

Верстальщики-то знают. А вот браузеры...

Justnewone · March 17, 2011

надо rocon юзать

swetlana · March 17, 2011

не надо.

Уже не помню точно почему, но не надо.

Косяки с ним вылезают.

memed · July 6, 2011

Нашла хорошую статью (правда css-ос там не ограничивается). Мне она помогла. Может еще кому-нибудь пригодиться.

bonyany · August 15, 2011

помню какой то яндекс субботник что ли... там чикуенок все способы рассмотрел... и считаю не зачем велосипед заново изобретать

во... и ссылку нашел http://www.artlebedev.ru/tools/technogrette/html/rounded-corners/

KuleshD · August 24, 2011

Здравствуйте.

Как сделать так, чтобы "Мы в контакте" не вылазило на закругления?

Ссылка на ресурс

Используемый код css

.vkontakte{
  border:solid 5px #FFF;
  border-color:#09C;
  margin:10px;
  padding:0px;
  background: #FFF;
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
  /* Тени */
  -moz-box-shadow: 5px 5px 10px #000; /* Firefox */
  -webkit-box-shadow: 5px 5px 10px #000; /* Safari and Chrome */
  box-shadow: 5px 5px 10px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
  font-weight:bold;
  font-size:12px;
  text-align:center;
}

Vlad · August 24, 2011

KuleshD, не влезайте в чужую тему. Есть вопрос, создайте для этого отдельную тему.

Hass · September 5, 2011

Для скругленных углов можно использовать метод css3 «border-radius», который будет работать в IE

Для этого надо использовать скриптик «PIE» смыл в том что мы для всех браузеров используем border-radius (с префиксами (-moz- и -webkit-) для надежности) и отдельно в этом же свойстве css задаем просто «border-radius» и после этого добавляем строку «behavior:url(ваш адрес до файла pie.htc/pie.htc)»

А файл этот скачиваем отсюда «PIE» Все на английском, но думаю разберетесь.

Работает это так: для всех браузеров скругленные уголки отображаются благодаря свойствам css3б, а для IE создается некий объект который имитирует скругленные углы.

Сейчас сам начал использовать - очень доволен.

Sign In

закругление углов средствами CSS HTML

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

memed

61 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information