CSS3的渐变属性的疑惑
高洛峰
高洛峰 2016-11-17 14:53:23
[CSS3讨论组]

background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));

没见过这种语法格式欸,有点不懂什么啥意思

见过的都是这种格式background: linear-gradient(direction, color-stop1, color-stop2, ...);

关于第一种格式希望大神能解析一下并且推荐一些资料谢谢!


高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(2)
欧阳克

这是webkit内核渐变的老式书写规则:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则;
例如:background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));

三叔

webkit-是兼容前缀,它告诉-webkit-内核的浏览器采用自己的方法来实现后缀后面的样式,一般完整的兼容前缀是:

{
    -webkit-style: value;
    -moz-style: value;
    -ms-style: value;
    -o-style: value;
    style: value;
}

这样浏览器就能自动识别支持的那一个样式。比如用chrome,它是-webkit-内核,因此只识别-webkit-前缀的样式和没有前缀的样式。-webkit-前缀告诉chrome用自己的实现方式渲染渐变,但最终样式依然由没有前缀的样式决定。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号