问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

CSS3的渐变属性的疑惑

头像
古道西风瘦马
    400780129
    background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
没见过这种语法格式欸，有点不懂什么啥意思
见过的都是这种格式background: linear-gradient(direction, color-stop1, color-stop2, ...);
关于第一种格式希望大神能解析一下并且推荐一些资料谢谢！
    css3
    阅读 3.4k
    4 个回答
    得票最新
    头像
    rudyfd
      2k220

      参考新版本的，如楼上@stardew所说

      下面是详解

          div {
        margin: 50px auto;
        width: 300px;
        height: 300px;
        background: -webkit-gradient(linear, 0 20%, 0 100%,from(red),  to(green),color-stop(.5,yellow));
    }
      
<body>
<div></div>
</body>

      实际效果图

      clipboard.png

      下面是解析
      0 20%代表渐变的起点，0%是横坐标，20%是纵坐标。
      0 100%代表渐变的终点，0%是横坐标，100%是纵坐标。
      from（red）代表渐变的起始颜色
      to（green）代表渐变的终止颜色
      color-stop（.5, yellow）代表渐变的中间颜色为yellow，位置为50%

      解析图
      图片描述

      建议题主多打代码，来验证自己的猜想。
      可以试着按照下面的想法练习深入一下
      ①在同一个渐变中加入几个位置不同的color-stop，例如color-stop(20%,black),color-stop(40%, blue)
      ②在同一个渐变中加入两个位置相同的color-stop，例如color-stop(25%,black),color-stop(25%, blue)

      看看有什么样的效果，欢迎交流讨论。

      头像
      stardew
        6.1k41633
        头像
        shockw4ver
          1k1311

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

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

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

          头像
          lilisong0523
            27962639

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

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题