• 技术文章 >web前端 >html教程

    关于 CSS的渐变和圆角_html/css_WEB-ITnose

    2016-06-24 11:34:52原创975
    style="border-radius: 10px; width: 669px; margin: 10px auto; display: none;padding-top:10px;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#e5e5e5));FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#e5e5e5);background: -moz-linear-gradient(top, #ffffff, #e5e5e5);background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);"

    没加渐变的时候,ie9是可以圆角的。
    加了渐变后,ie9居然没有圆角了。

    并且,这渐变对IE6-9、火狐、谷歌都有效,但是IE10为什么没效果呢?

    问题出在哪里了?

    我没分了,不好意思,都给大家了。


    回复讨论(解决方案)

    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#e5e5e5));

    改成
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#e5e5e5));
    background:-moz-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#e5e5e5));
    background:-ms-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#e5e5e5));
    background:-o-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#e5e5e5));
    background:gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#e5e5e5));

    1楼v5 正解

    background:gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#e5e5e5));
    这一条报错
    gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#e5e5e5))不是background的有效值
    而且,IE9仍然没有圆角。
    不加这些渐变代码,IE9是有圆角的。

    IE9以下不支持这个背景渐变吧..这个是css3的属性

    关于渐变:IE6-IE9都可以渐变,IE10不可以。
    关于圆角:没加渐变代码时,IE9 IE10是圆角;加了渐变代码后,IE9 IE10展现方角了。


    大侠给的代码不行啊。
    求大神。

    关于渐变:IE6-IE9都可以渐变,IE10不可以。
    关于圆角:没加渐变代码时,IE9 IE10是圆角;加了渐变代码后,IE9 IE10展现方角了。


    大侠给的代码不行啊。
    求大神。


    百度了一下,IE9使用那个渐变和圆角会出现bug,详情可参考http://www.w3cplus.com/content/css3-gradient

    我说错了,是IE11不行,IE10还没测。

    但是为何 有渐变后,圆角就消失呢?

    推荐使用 http://buttoncssgenerator.com ,可以生成各种效果的按钮css,包括圆角、渐进颜色、阴影,并兼容各大主流浏览器

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    上一篇:Hibernate一些_方法_@注解_代码示例_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• ajax基本介绍• 求两个纯Html之间的传值示例_html/css_WEB-ITnose• 求解博客css设置_html/css_WEB-ITnose• clear:both 后按钮错位了_html/css_WEB-ITnose• 前端之HTML知识点整理
    1/1

    PHP中文网