Закругление

Аватара пользователя
Евгений
Сообщения: 228
Зарегистрирован: 01 янв 2010
Как закруглить края?
Вот весь CSS код.

Код: Выделить всё

/* ---------------------------------- *
     Forums on home page
 * ---------------------------------- */
#forums_list_wrap { margin-top: 4px; padding-right: 2px; }
#forums_top_links { clear: both; }
#forums_wrap { clear: both; padding-top: 1px; }
.cat_title {                    /* Category header */
   padding: 3px 8px 5px; letter-spacing: 1px; text-indent: 0.6em;
   background: #DEE3E7 url(../images/cellpic1.gif) repeat-x;
   }
   .cat_title a { text-decoration: none; color: #333333 !important; }
table.forums { width: 100%; }
   .forums th {
      padding: 0 !important; font-size: 10px; font-weight: normal; color: #3C3C3C;
   }
   .forums td {
      padding: 3px 4px; font-size: 11px;
   }
.forums em {                 /* titles like: "Subforums:", "Moderators:" */
   color: #5E5E5E; font-style: italic;
}
.forumlink {                 /* forum links */
   font-size: 12px; font-weight: bold;
   }
   .forumlink a { text-decoration: none; }
.forums .forumlink {         /* forum title */
   margin-top: 1px;
}
.forum_desc {                /* forum description */
   margin-top: 2px; color: #333333; font-size: 11px; line-height: 110%;
}
.subforums {                 /* subforums */
   margin-top: 2px; padding-left: 0.5em;
   }
   .subforums em { display: none; }
   .subforums + .moderators { margin-top: 0; }
   .dot-sf { color: #417998 !important; font-size: 11px; margin-right: 4px; }
   .new .dot-sf { color: #CA4200 !important; }
   .sf_title { white-space: normal; }
   .sf_icon { margin-right: 1px; }
   .sf_separator {}
   .sf_title a { text-decoration: none; }
.moderators {                /* moderators */
   margin-top: 2px; font-size: 11px; line-height: 110%;
   }
   .moderators a, .moderators a:visited {
      color: #333333; font-size: 10px; text-decoration: none;
    }
.f_topics, .f_posts { display: none; } /* Hide posts/topics count <td> in index */
.f_last_post {               /* last topic/post */
   text-align: center;
   }
   .last_topic { margin-top: 1px; white-space: nowrap; }
      .last_topic a { text-decoration: none; }
   .last_post_time { margin-top: 2px; font-size: 10px; white-space: nowrap; }
      .last_time {}
      .last_author { padding-left: 3px; }
   .f_stat_inline {           /* Posts: xx Topics: xx */
      margin-top: 1px; white-space: nowrap; }
      .f_stat_topics {}
      .f_stat_posts { padding-left: 3px; }   
.forums thead {              /* Forum TH-Headers */
 display: none;
}
.f_icon {                    /* Forum Icon cell */
   width: 46px;
   padding: 6px 0 !important;
}
.f_titles {                  /* Forum Title cell */
   width: auto;
}
.f_topics {                  /* Topics Count cell */
   width: 40px; text-align: center;
}
.f_posts {                   /* Posts Count cell */
   width: 50px; text-align: center;
}
.f_last_post {               /* Forum Last Topic/Post cell */
   width: 230px;
}
.f_stat_inline {             /* Inline Topic/Post count */
   display: block;
}

table.forums    { border-collapse: collapse; }
.cat_title      { border: 0 none;
                  border-top:    1px solid #B7C0C5;
                  border-bottom: 1px solid #C3CBD1; }
.f_tbl_wrap, #board_stats_wrap {
                  border: 0 none; }
.forums td.row1 { border: solid #FDFDFD; border-width: 0 1px 1px 0; }
.forums td.row2 { border: solid #F5F5F5; border-width: 0 1px 1px 0; }
td.f_titles     { border-right-color: #FAFCFD !important; }
td.last_td      { border-right-width: 0 !important; }

.cat_footer {
   height: 0px; margin-top: -1px; border-top: 1px solid #C3CBD1;
   font-size: 0px; line-height: 0px;
}
.cat_separator { height: 10px; font-size: 0px; line-height: 0px; }
#mark_all_forums_read { margin: -10px 0 3px 0; }

#online_time    { float: left; font-style: italic; color: #444444; }
#online_explain { float: right; }
#online_userlist a { white-space: nowrap; }
#forums_top_nav { display: none; }
Вложения
ывава.JPG
ывава.JPG    1.5 КБ • 541 просмотр

Аватара пользователя
Distructor
Администратор
Сообщения: 1631
Зарегистрирован: 28 дек 2009
kartel писал(а):Как закруглить края?
есть много путей:
    1 - самый старый и наиболее часто используемый - использование картинок с углами, которые и подставляются в нужные места
    2 - тоже довольно старый, но довольно редко используемый - рисуется буква "о" (или &bull; http://habrahabr.ru/blogs/css/64016/ ), с помощью относительно позиционирования она сдвигается в угол и отсекается все лишнее, чтобы получить четверть круга
    3 - использовать свойства CSS3 (-moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px;) Но они не работают в IE и, почему-то, в Opera
    4 - используя js
    ...
http://cssing.org.ua/2008/06/23/rounded ... -approach/
вот список из 50+ вариантов http://www.smileycat.com/miaow/archives/000044.php

возможно позже изложу основные в отдельном топике

Аватара пользователя
Евгений
Сообщения: 228
Зарегистрирован: 01 янв 2010
ВНИМАНИЕ!
Вот ещё как можно.
В .css добавить вот это (ну куда добавлять я думаю нету смысла писать).

Код: Выделить всё

 -webkit-border-top-left-radius:10px;
         -webkit-border-top-right-radius:10px;
         -webkit-border-bottom-left-radius:0px;
         -webkit-border-bottom-right-radius:0px;

         -khtml-border-radius-topleft:10px;
         -khtml-border-radius-topright:10px;
         -khtml-border-radius-bottomleft:0px;
         -khtml-border-radius-bottomright:0px;

         -moz-border-radius-topleft:10px;
         -moz-border-radius-topright:10px;
         -moz-border-radius-bottomleft:0px;
         -moz-border-radius-bottomright:0px;

Аватара пользователя
Distructor
Администратор
Сообщения: 1631
Зарегистрирован: 28 дек 2009
kartel писал(а):Вот ещё как можно.
а этот пункт по-твоему про что?
Distructor писал(а):3 - использовать свойства CSS3 (-moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px;) Но они не работают в IE и, почему-то, в Opera

Аватара пользователя
Евгений
Сообщения: 228
Зарегистрирован: 01 янв 2010
Distructor писал(а):
kartel писал(а):Вот ещё как можно.
а этот пункт по-твоему про что?
Distructor писал(а):3 - использовать свойства CSS3 (-moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px;) Но они не работают в IE и, почему-то, в Opera

ааааа.
сорри.


Вернуться в «Вопросы по веб-дизайну и верстке»