Закругление

Ответить
Аватара пользователя
Евгений
Сообщения: 215
Зарегистрирован: 01.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 КБ • 610 просмотров

Аватара пользователя
Distructor
Администратор
Сообщения: 1606
Зарегистрирован: 28.12.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

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

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

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

Ответить