Каков второй лучший способ сделать углы этого Content Box (фиксированной ширины) круглыми (без border-radius и javascript)? - PullRequest
Новая
       35

Каков второй лучший способ сделать углы этого Content Box (фиксированной ширины) круглыми (без border-radius и javascript)?

1 голос
/ 22 марта 2010

Можно ли сделать угол этой коробки круглым с такими же тегами html. без использования каких-либо других тегов и border-radius свойство и JavaScript. но я могу использовать классы CSS и фоновые изображения. и высота ящика должна зависеть от содержания <p>grr</p>

Ширина ящика и высота <h2> фиксированы, но мне нужна высота содержимого гибкая. 

<h2>Nulla Facilisi</h2>
<p>
   Phasellus at turpis lacus. Nulla hendrerit lobortis nibh. 
   In lectus erat, blandit non feugiat vel, accumsan ac dolor. 
   Etiam et ligula vel tortor tempus vehicula porttitor ut ligula. 
   Mauris felis odio, fermentum vel
</p>

alt text

Редактировать: Каков наилучший способ достичь этого без свойства css border-radius, которое не поддерживается Internet Explorer?

Ответы [ 6 ]

2 голосов
/ 22 марта 2010

Вы можете поместить фон в H2, который составляет 10 пикселей в высоту и фиксированную ширину с верхними углами, расположенными сверху.

Затем в теге p поместите противоположное изображение внизу.

Что-то вроде: 

<h2 style=background-image: url(''); background-repeat: no-repeat; background-position: 0 0;">Nulla Facilisi</h2>
<p style=background-image: url(''); background-repeat: no-repeat; background-position: 100% 0;">
   Phasellus at turpis lacus. Nulla hendrerit lobortis nibh. 
   In lectus erat, blandit non feugiat vel, accumsan ac dolor. 
   Etiam et ligula vel tortor tempus vehicula porttitor ut ligula. 
   Mauris felis odio, fermentum vel
</p>
1 голос
/ 22 марта 2010

Вы знаете, что можете использовать htc hack, чтобы получить поддержку border-radius в IE

border-radius.htc из Google Code

Я еще не использовал его сам, но он предположительно поддерживается в IE6, 7 и 8. Поэтому следующий должен охватывать все. 

.rounded {
-webkit-border-radius: 9px;  /* safari-chrome */ 
 -moz-border-radius: 9px;   /* firefox */ 
 border-radius: 9px;  /* opera */ 
 behaviour:url(border-radius.htc); /* IE hack */ 
 }
1 голос
/ 22 марта 2010

Если поле имеет заданную ширину, вы можете использовать верхнее и нижнее изображение для создания эффекта. В противном случае вам понадобится JavaScript и / или CSS, которые еще не полностью поддерживаются (или вообще не поддерживаются в IE6 / 7).

1 голос
/ 22 марта 2010

Прочитайте Roundup Corners Roundup и выберите решение, которое наилучшим образом соответствует вашим потребностям.

1 голос
/ 22 марта 2010

Попробуйте это сообщение иначе: http://dimox.net/cross-browser-border-radius-rounded-corners/ (не мое)

Или плагин jQuery для закругленных углов: http://plugins.jquery.com/project/corners

1 голос
/ 22 марта 2010

Углы каратэ

По сути, у вас есть изображение, представляющее углы, затем вы размещаете их, используя position:absolute; и background-position.Единственным недостатком является то, что вам нужен особый случай для IE6 (так как он не любит прозрачные pngs), и вам нужно добавить 4 дополнения <div> s для каждого блока, но это работает очень хорошо и не так уж сложно.

Вот мой код для углов 5 px, используя изображение круга 10x10 :

CSS: 

.round{
    position:relative;
}

.round .corner{
    background: url('corners.png') no-repeat;
    position:absolute;
    width:5px;
    height:5px;
    font-size:0%;
}
.round .tl{
    top: 0px;
    left: 0px;
    background-position: 0 0;
}
.round .tr{
    top: 0px;
    right: 0px;
    background-position: -5px 0;
}
.round .bl{
    bottom: 0px;
    left: 0px;
    background-position: 0 -5px;
}
.round .br{
    bottom: 0px;
    right: 0px;
    background-position: -5px -5px;
}

HTML: 

<div class="round">
  <p>Content goes here</p>
  <div class="corner tl"></div>
  <div class="corner tr"></div>
  <div class="corner bl"></div>
  <div class="corner br"></div>
</div>
...