Jump to content
  • 0

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


alexpts
 Share

Question

Скругляю углы у дива с помощью

-moz-border-radius-bottomleft:10px;

-moz-border-radius-bottomright:10px;

-moz-border-radius-topleft:30px;

-moz-border-radius-topright:10px;

background:#777777 url(img.png) repeat scroll 0% 50% !important;

div.jpg

Цвет отображается нормально по форме скругления, а картинка-бэкграунд во весь див. Можно ли как-то картинку отображать (обрезать по краям скругления) как цвет?

Edited by alexpts
Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0
Скругляю углы у дива с помощью

-moz-border-radius-bottomleft:10px;

-moz-border-radius-bottomright:10px;

-moz-border-radius-topleft:30px;

-moz-border-radius-topright:10px;

background:#777777 url(img.png) repeat scroll 0% 50% !important;

div.jpg

Цвет отображается нормально по форме скругления, а картинка-бэкграунд во весь див. Можно ли как-то картинку отображать (обрезать по краям скругления) как цвет?

Смело. Афигеть дайте два...

Потом повесите определение браузера и все не FF будете подальше посылать?

Link to comment
Share on other sites

  • 0

У самых новых фоксов (по-моему, в ветке 3.1 → 3.5, которая должна выйти где-то через месяц, если не раньше) вроде бы эту проблему пофиксили. А вообще на то экспериментальная поддержка (-moz-, -webkit- и пр.) и экспериментальная...

Link to comment
Share on other sites

  • 0

2Justnewone

Я кстати видел буржуйский сайт, который не поддерживает ИЕ в принципе. Т.е. если зайти на него под ИЕ увидишь голый текст без стилей вообще. И это правильно товарищи!!!

Link to comment
Share on other sites

  • 0
2Justnewone

Я кстати видел буржуйский сайт, который не поддерживает ИЕ в принципе. Т.е. если зайти на него под ИЕ увидишь голый текст без стилей вообще. И это правильно товарищи!!!

Один сайт? Круто, процесс пошел.

А кто, например, Оперой зайдет, или типа Сафари, на данном сайте им че делать, они-то чем провинились?

Link to comment
Share on other sites

  • 0

А причем тут опера и сафари? Лично мной за этими браузерами косяков замечено не было. Бордер-радиус они кажись отображать умеют (сафари уж точно).

"Один сайт?" - как грится - лиха беда начало... Это был сайт довольно известного (судя по обширному портфолио) дизайнера. Жаль адреса не помню.

Link to comment
Share on other sites

  • 0
А причем тут опера и сафари? Лично мной за этими браузерами косяков замечено не было. Бордер-радиус они кажись отображать умеют (сафари уж точно).

"Один сайт?" - как грится - лиха беда начало... Это был сайт довольно известного (судя по обширному портфолио) дизайнера. Жаль адреса не помню.

-moz-border-radius?

Link to comment
Share on other sites

  • 0

>>Justnewone,

>>Смело. Афигеть дайте два...

>>Потом повесите определение браузера и все не FF будете подальше посылать?

Вы о скрипте?

Он рабтает для IE 6 и IE7. Не по теме!

Вообще, насколько я понял это проблема пока никак не решается...

Link to comment
Share on other sites

  • 0
Скругляю углы у дива с помощью

-moz-border-radius-bottomleft:10px;

-moz-border-radius-bottomright:10px;

-moz-border-radius-topleft:30px;

-moz-border-radius-topright:10px;

background:#777777 url(img.png) repeat scroll 0% 50% !important;

div.jpg

Цвет отображается нормально по форме скругления, а картинка-бэкграунд во весь див. Можно ли как-то картинку отображать (обрезать по краям скругления) как цвет?

Делай слоями.

Link to comment
Share on other sites

  • 0

Можно на rocon посмотреть. Она рисует скругленные уголки через -moz-border-radius для FF, через SVG для Opera и через VML для IE.

Но вам тут проще сделать скругленную маску для уголков под цвет фона. Если, конечно, фон однородный.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy