Log in
Sign Up
气宇轩昂的蜡烛 · 国家级教练后,安家杰再得喜讯:成人大代表!差 ...· 1 年前 · |
越狱的橙子 · 会倒垃圾的扫拖机器人——由利自动集尘扫地机器 ...· 1 年前 · |
礼貌的鸡蛋 · 性健康和生殖健康和权利| OHCHR· 1 年前 · |
考研的葡萄 · 怎么做好销售- 知乎· 1 年前 · |
还单身的烈马 · 围绕《超级马力欧:奥德赛》狂欢过后的冷思考: ...· 1 年前 · |
here is the CSS code i put in:
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
Here by a link to a fiddle that I create to help you out:
https://jsfiddle.net/gk6xmsz6/
Should work if you implemented as above.
Is that panel implemented in one div?
Hope it helps you!
Best regards
Daniel Martins
here is the div i put in the css:
.RoundPanelGrad {
border-radius : 10px;
padding : 15px;
box-shadow : 10px 10px 5px #C0C0C0;
background : -webkit-linear-gradient(left, #606060, #E8E8E0); /* For Safari 5.1 to 6.0 */
background : -o-linear-gradient(right, 606060 , #E8E8E0); /* For Opera 11.1 to 12.0 */
background : -moz-linear-gradient(right, 606060 , #E8E8E0); /* For Firefox 3.6 to 15 */
background : linear-gradient(to right, 606060 , #E8E8E0); /* Standard syntax */
I click the link to fiddle, i also see white background on my screen.
Service Studio uses a webkit based rendering, so it will follow the " -webkit-" rule as Chrome does, or the standard one if valid.
For Firefox, IE 10 and IE 11 you are missing the # character on the first color, making it invalid.
Works if you add it: https://jsfiddle.net/k3f1jwbr/1/ (tested in firefox 35 ...but should work on all 16+ as well)
For IE 8 and 9 it just won't work, since it doesn't support gradients at all. Please don't try to use the filters to make it work there ..my experience with filters = memory leaks.
Regards,
João Rosado
Tested it a bit more and noticed a couple more problems with your css.
Also following the recommendations from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Cross-browser_gradients
Here is an updated jsfiddle: https://jsfiddle.net/m2ztuy9a/
So what changed: On opera and in firefox 3.6 - 16 the gradient was being showed inversed when compared with Chrome and other versions of Firefox. So changed the "right" to "left" on those 2. Changed the "background" to "background-image" (think this is to prevent it from overriding the "background-color") Start with a "background-color" so that if it's shown in IE 8 and 9 it has a color to fallback to (you may need to ajust the fallback color) Regards,
João Rosado