颜色渐变linear-gradient(yellow,red)黄红的开始位置迷糊

颜色渐变linear-gradient(yellow,red)黄红的开始位置迷糊

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>线性渐变</title>

    <style type="text/css">

    /*此处写代码*/

.t1{

width: 200px;

height: 200px;

background: -moz-linear-gradient(yellow,red);

}

.t2{

width: 200px;

height: 200px;

background: -moz-linear-gradient(right,yellow,red);

}

.t3{

width: 200px;

height: 200px;

background: -moz-linear-gradient(right bottom,yellow,red);

    </style>

</head>

<body>

    <!--此处写代码-->

<div class="t1"></div>

<div class="t2"></div>

<div class="t3"></div>

</html>

  1. 代码里黄色在前面,但效果只有效果t1 个人感觉是对的黄到红的渐变

  2. 为什么t2 ,t3就是红色先开始,而不是黄色先开始

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕星星 2020-03-24 19:14:47

同学你好,上次回答中老师说过了,right是从右向左渐变,所以从右侧开始是黄色渐变到左侧是红色,并不会控制颜色的改变。如果是从左向右渐变,方位词是left 或者to right 。

t3也是同样的道理,right bottom是从右下角渐变到左上角,to right bottom才是从左上角渐变到右下角。

自己再测试理解下,祝学习愉快!

好帮手慕星星 2020-03-24 14:24:16

同学你好,问题解答如下:

1、元素上面的文字也是需要添加的

http://img1.sycdn.imooc.com//climg/5e79a4d8094ef8ec08850322.jpg

可以用一个div包裹着文字和渐变元素,例如

http://img1.sycdn.imooc.com//climg/5e79a61d092e4da806700581.jpg

统一设置样式,让元素排列在一行显示

http://img1.sycdn.imooc.com//climg/5e79a63a0965135f13490955.jpg

2、t2设置的渐变方位是right,也就是从右侧开始渐变,所以右侧为黄色。如果想要左侧为黄色,可以改为to right

http://img1.sycdn.imooc.com//climg/5e79a74f090c626d11810171.jpg

3、第三个也是同样的道理,从右下角开始,但是实现效果没有问题。

自己再理解下,祝学习愉快!

  • 提问者 只恨未尽心 #1
    渐变我知道是一个色到另一个色的转变 主要是 (yellow,red)(right,yellow,red) (right bottom,yellow,red) 里的颜色其实位置没搞明白 t1 黄色开始毋庸置疑 t2为什么就不是黄色开始,right不是渐变的结束方向吗,怎么会控制到颜色 t3同样跟t2是一个问题 括号里的顺序是 (黄,红)应该t1 t2 t3都是从黄色开始才对呀,就这里没搞明白,按的是什么原理
    2020-03-24 17:07:48
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师