Круглые края с угла
Опубликовано Jun 22, 03:02 PM, секция Статьи, категория TextpatternЦелый день убил на подготовку к завтрашнему переэкзамену постижение Тайны Круглых Углов. И, кажется, завеса тайны приоткрылась. Оказывается, все просто!
Достаточно иметь большой прямоугольник круглоугольник, немного подогнать структуру html и чудеса свершаются!
css код:
ul#related-articles {
margin: 0;
padding:0;
}
ul#related-articles li {
display: block;
float: left;
width: 27%;
border: 0;
text-align: left;
}
ul#related-articles li .box-title {
font-size: 90%;
}
ul#related-articles li .box-preview {
font-size: 85%;
}
.relatedBox {
padding: 0 0 0 11px;
margin: 10px;
background: white url("/st-img/tsr-l.png") top left no-repeat;
}
.relatedBox div.box-title {
background:url("/st-img/tsr-r.png") top right no-repeat;
margin:0;
padding:8px 0 0.5em 0;
}
.relatedBox p {
margin:0 0 0 -11px;
padding:0 11px 0.5em;
border:0;
border-width:0 1px;
background:#efefef;
}
.relatedBox div.bottom {
margin:0 0 0 -11px;
padding-left:11px;
background:url("/st-img/tsr-l.png") bottom left no-repeat;
}
.relatedBox a.more {
display:block;
text-align:right;
padding:0 10px 10px 0;
background:url("/st-img/tsr-r.png") bottom right no-repeat;
}
html код
<ul id="related-articles">
<li class="relatedBox" onclick="javascript:location.href='/'">
<div class="box-title">
<a href="/" title="Открыть статью">Охлаждение кожи после лазеротерапии способствует гиперпигментации</a><br />
</div>
<p class="box-preview">
Распространено представление о том, что охлаждение кожи при помощи струи холодного воздуха может позволить снизить...
</p>
<div class="bottom">
<a href="/" class="more">Открыть полностью →</a>
</div>
</li>
</ul>
Оригнал здесь (тут же найдете картинку для углов)
