То, что раньше делалось исключительно на картинках или больших скриптах, теперь создается одной строкой при помощи CSS стиля border-radius и может закруглить любой угол, под любым наклоном, в любую сторону.
Синтаксис border-radius
Думаю пояснять ничего не стоит. Все предельно просто. Это самый простой способ задать окружность. Закруглит равномерно со всех сторон. Так же можно задать определенный угол закругления. Т.е. под каким наклоном и в какую сторону:
Первое число — горизонтальное отклонение, второе — вертикальное. Линии соединят эти точки и получится своеобразное закругление. Пример последнего скриншота:
<div style="
border-top-left-radius:25px 100px;
border-top-right-radius:25px 100px;
border-bottom-right-radius:25px 100px;
border-bottom-left-radius:25px 100px;
border:1px solid #ccc;
width:500px;
padding:30px 5px;
font:20px arial;
background:#ccc;">
border-top-left-radius:25px 100px; <br/>
border-top-right-radius:25px 100px; <br/>
border-bottom-right-radius:25px 100px; <br/>
border-bottom-left-radius:25px 100px; <br/>
Вертикально - 100, горизонтально - 25
</div>
Комментарии