CSS3 background

日期：2021-03-17 类型：科技新闻 

关键词：微信小程序商城，免费微信小程序，小程序设计软件，小程序生成平台，可查询的小程序

linear-gradient 是CSS3中1个关键的特性，初看感觉很简易，可是别看它简易，它能完成许多繁杂的图型。

编码還是较为简易的: linear-gradient(65deg,#2b7ce7,#2b7ce7 50%,transparent 0,transparent),linear-gradient(115deg,#2b7ce7,#2b7ce7 50%,transparent 0,transparent)

可是了解起来還是必须1定基本的。

线形渐变色 linear-gradient

基础用法

background-image: linear-gradient(red, yellow, blue, green); 
background-image: linear-gradient(rgba(255, 0, 0, .2), yellow, blue, green);

操纵色调渐变色的方位(right, left, top, bottom)

/*
    操纵色调渐变色的方位
    to right -- 从左向右
    to top -- 从下到上
    to left -- 从右到左
    to bottom --- 从上到下（默认设置值）
*/
background-image: linear-gradient(to right, red, yellow, blue, green);
background-image: linear-gradient(to top, red, yellow, blue, green);
background-image: linear-gradient(to left, red, yellow, blue, green);
background-image: linear-gradient(to bottom, red, yellow, blue, green);

操纵色调渐变色的方位(deg)

/*0deg = to top -- 从下到上*/
background-image: linear-gradient(0deg, red, yellow, blue, green);
/*根据0度顺时针转动45deg*/
background-image: linear-gradient(45deg, red, yellow, blue, green);
/*根据0度逆时针转动45deg*/
background-image: linear-gradient(⑷5deg, red, yellow, blue, green);

操纵色调渐变色的方位(to)

/*设定过渡色调的起止部位*/
/*从过渡起止部位50px刚开始让鲜红色和黄色之间造成色调渐变色实际效果*/
background-image: linear-gradient(to right, red 50px, yellow, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, blue, green);
background-image: linear-gradient(to right, red 50px, yellow 50px, yellow 100px, blue, green);

反复线形渐变色：repeating-linear-gradient

background-image: linear-gradient(to right
, red 0
, red 50px
, yellow 50px
, yellow 100px
, red 100px
, red 150px
, yellow 150px
, yellow 200px);
/**与上面反复写渐变色有同样的实际效果*/
background-image: repeating-linear-gradient(
        to right
        , red 0
        , red 50px
        , yellow 50px
        , yellow 100px
);

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：CSS完成会话框小尾巴作用 返回下一篇：没有了