?

Log in

Border-radius and gradient IE9 - Tyaps ASP [entries|archive|friends|userinfo]
Программирование в ASP.Net

[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

Border-radius and gradient IE9 [Sep. 1st, 2011|12:46 pm]
Программирование в ASP.Net

tyaps_asp

[tyaps]
[Tags|, ]

Юзая HTML5 фичи, наткнулся на то, что IE9 не умеет вместе делать border-radius и градиентную заливку.

.button1
{

  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfeff', endColorstr='#9bb2bb') !important;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(252,254,255)), to(rgb(155,178,187))) !important;
  background: -moz-linear-gradient(top, rgb(252,254,255), rgb(155,178,187)) !important;
 
  background-image: -o-linear-gradient(rgb(252,254,255),rgb(155,178,187)) !important;


  border:0;

  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  

}


* This source code was highlighted with Source Code Highlighter.


Решение в том, чтобы создать маленький градиентный png, перевести его в data URI (с помощью, например, http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ ) и загнать в такой стиль:

.button2
{

   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -khtml-border-radius: 5px;

   border:0;
   background-color: #5a5;

   background-image: url(data:image/png;base64,iVBORw0KGgANSUhEUgAAAB..много_буков..ElFTkSuQmCC);
 
   background-size: 100% 100%;

}


* This source code was highlighted with Source Code Highlighter.


(найдено здесь http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding)
linkReply