Скругление углов, используя CSS

@ansi_str · Регистрация: 22.09.2011

Author24 — интернет-сервис помощи студентам

Здравтвуйте - использую CSS для скругления углов
Таким образом:

CSS

#radius {width:350px; }
#text 
{
    padding:5px; 
    background-color:#CC3333; 
    font-size: 20px; 
    line-height: 25px;
    color: White;
}
 
#radius b 
{
    background-color:#CC3333; 
    display:block; 
    height:1px;
    overflow:hidden; 
    font-size:1px;
}
.r1 {margin:0 10px; }
.r2 {margin:0 7px; }
.r3 {margin:0 5px; }
.r4 {margin:0 4px; }
.r5 {margin:0 3px; }
.r6 {margin:0 2px; }
.r7 {margin:0 1px; }

HTML5

<div id="radius">
 
            <b class="r1"></b>
            <b class="r2"></b>
            <b class="r3"></b>
            <b class="r4"></b>
            <b class="r5"></b>
            <b class="r6"></b>
            <b class="r6"></b>
            <b class="r7"></b>
            <b class="r7"></b>
            <b class="r7"></b>
 
                <div id="text">
                        <center>
                                    Уважаемые посетители сайта,<br />
                                    мы будем рады узнать Ваши пожелания <br />
                                    по улучшению работы сайта <br />
                         </center>
                </div>
 
            <b class="r7"></b>
            <b class="r7"></b>
            <b class="r7"></b>
            <b class="r6"></b>
            <b class="r6"></b>
            <b class="r5"></b>
            <b class="r4"></b>
            <b class="r3"></b>
            <b class="r2"></b>
            <b class="r1"></b>
        </div>

Когда использую впервые - работает, в следующий раз на той же самой странице ниже - края почему то не скругляются....В чём может быть ошибка?

@Vorona · 28.10.2011, 15:19

так есть же свойство для скругления углов
border-radius: [значение]px;
или
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
для каждого угла
ну вот еще для различных браузеров
-o-border-radius
-ms-border-radius
-moz-border-radius
-webkit-border-radius

@ansi_str · 28.10.2011, 15:25 **[ТС]**

Сообщение от Vorona

так есть же свойство для скругления углов
border-radius: [значение]px;
или
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
для каждого угла
ну вот еще для различных браузеров
-o-border-radius
-ms-border-radius
-moz-border-radius
-webkit-border-radius

А в VisualStudio не поддерживает их - в подцветке синтаксиса их нет (

@aynnv · 28.10.2011, 18:36

Сообщение от ansi_str

А в VisualStudio не поддерживает их - в подцветке синтаксиса их нет (

Это не влияет на их работоспособность

@Vorona · 28.10.2011, 20:19

просто, что эти свойства пришли с css3 и версии vs постарше могут не знать об этих новшествах, потому можно поставить новую студию или библиотеки обновить, или работать с css в другой IDE, нежели писать столько кода для 4 уголков

@Rikani · 29.10.2011, 11:17

Не по теме:

Такого варианта скругления я еще не видел.:)

Eugene22 · 29.10.2011, 11:34

Сообщение от Vorona

эти свойства пришли с css3 и версии vs постарше могут не знать об этих новшествах

более того и старые браузеры могут не знать об их существовании, например IE ниже 9 версии
Плюс могу добавить, что IE 9 и Opera принимают просто border-radius без префикса браузера

@ansi_str · 31.10.2011, 08:16 **[ТС]**

Хотелось, чтобы работало по возможно под все и старые браузеры...

@vasvas7775 · 31.10.2011, 16:41

Сообщение от Rikani

Не по теме:
Такого варианта скругления я еще не видел.

Как сделать блок со скругленными уголками без рисунков?

Вообще этот вариант, работает нормально с 7 осла, даже 6 глючит, не говоря о пятом.....

@ansi_str · 01.11.2011, 14:44 **[ТС]**

А используя картинку - будет кроссбраузерно отображаться?

@NekTar · 03.11.2011, 21:12

Можно попробовать http://css3pie.com/

@Vorona Peace 2 all shining faces 674 / 535 / 85 Регистрация: 05.03.2010 Сообщений: 1,282
	28.10.2011, 15:19	2
	так есть же свойство для скругления углов border-radius: [значение]px; или border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius для каждого угла ну вот еще для различных браузеров -o-border-radius -ms-border-radius -moz-border-radius -webkit-border-radius 0

@ansi_str 57 / 57 / 15 Регистрация: 22.09.2011 Сообщений: 319
	28.10.2011, 15:25 [ТС]	3
	Сообщение от Vorona так есть же свойство для скругления углов border-radius: [значение]px; или border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius для каждого угла ну вот еще для различных браузеров -o-border-radius -ms-border-radius -moz-border-radius -webkit-border-radius А в VisualStudio не поддерживает их - в подцветке синтаксиса их нет ( 0

@aynnv 0 / 0 / 0 Регистрация: 26.10.2011 Сообщений: 19
	28.10.2011, 18:36	4
	Сообщение от ansi_str А в VisualStudio не поддерживает их - в подцветке синтаксиса их нет ( Это не влияет на их работоспособность 0

@Vorona Peace 2 all shining faces 674 / 535 / 85 Регистрация: 05.03.2010 Сообщений: 1,282
	28.10.2011, 20:19	5
	просто, что эти свойства пришли с css3 и версии vs постарше могут не знать об этих новшествах, потому можно поставить новую студию или библиотеки обновить, или работать с css в другой IDE, нежели писать столько кода для 4 уголков 0

@Rikani
	29.10.2011, 11:17 #6
	Не по теме: Такого варианта скругления я еще не видел.:) 0

Eugene22 _ 2364 / 1243 / 78 Регистрация: 28.10.2009 Сообщений: 4,331
	29.10.2011, 11:34	7
	Сообщение от Vorona эти свойства пришли с css3 и версии vs постарше могут не знать об этих новшествах более того и старые браузеры могут не знать об их существовании, например IE ниже 9 версии Плюс могу добавить, что IE 9 и Opera принимают просто border-radius без префикса браузера 0

@ansi_str 57 / 57 / 15 Регистрация: 22.09.2011 Сообщений: 319
	31.10.2011, 08:16 [ТС]	8
	Хотелось, чтобы работало по возможно под все и старые браузеры... 0

@vasvas7775 Обитатель 317 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	31.10.2011, 16:41	9
	Сообщение от Rikani Не по теме: Такого варианта скругления я еще не видел. Как сделать блок со скругленными уголками без рисунков? Вообще этот вариант, работает нормально с 7 осла, даже 6 глючит, не говоря о пятом..... 1

@ansi_str 57 / 57 / 15 Регистрация: 22.09.2011 Сообщений: 319
	01.11.2011, 14:44 [ТС]	10
	А используя картинку - будет кроссбраузерно отображаться? 0

@NekTar 10 / 10 / 2 Регистрация: 25.04.2011 Сообщений: 123
	03.11.2011, 21:12	11
	Можно попробовать http://css3pie.com/ 0