css3中渐变及渐变需要注意的地方

渐变
//渐变中,默认从上到下渐变,前20%为纯红色,20%-50%之间为红色到蓝色渐变,50%-70%为蓝色到黄色渐变,70%以后为黄色
<style>

box{

        width:200px;
        height:200px;
          background:-webkit-linear-gradient(red 20%, bule 50%,yellow 70%);

}
</style>
跳变
//跳变中,默认从上到下,前20%为红色,20%-50%为蓝色,50%-70%为黄色,70%以后为粉色
<style>

box{

        width:200px;
        height:200px;
        background:-webkit-linear-gradient(red 20%,blue 20%, bule 50%,yellow 50%,yellow 70%,pink 70%);

}
</style>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • body{ background:#f5faff; } .demo_con{ width:960px; margi...
    小忆123阅读 4,847评论 0 0
  • 一、html5新特性 1.增加了一个专门用于绘画的元素canvas 2.增加了用于媒体播放的音频和视频元素 3.增...
    空谷悠阅读 3,780评论 0 2
  • -webkit-linear-gradient线形渐变详解 CSS3发布很久了,现在在国外的一些页面上常能看到他的...
    魏魏魏_1500阅读 15,709评论 0 3
  • 好好学习,成绩搞上去了,才是好孩子! 彤彤会叫奶奶了,彤彤真乖,真懂事! 宝宝听话,来,给叔叔吃一个,真乖! 相信...
    薛灵芸阅读 3,097评论 0 0
  • . 深山荒野,冷清凄凉。浓雾蒙蒙,雨清水秀。 玉湖旁,闲卧着一匹狼,一匹寂寞的狼。它双眉紧蹙,两眼无神,眉须...
    竹鸿初阅读 2,870评论 0 0

友情链接更多精彩内容