美文网首页
第八章 圆角样式和css渐变

第八章 圆角样式和css渐变

作者: 扶光_ | 来源:发表于2020-11-25 20:02 被阅读0次

    一,颜色渐变

    1.线性渐变(像刷油漆)

    写法:background-image:linear-gradient(blue,red)
    里面的参数也可以使用rgb,十六进制等形式来表示颜色
    写上面的代码如下图所示,会变成这样

    例1
    那么问题来了,我们该如何改变渐变颜色的方向呢?
    方向
    看下面代码
     background-image:linear-gradient(to top,blue,red)   只需在颜色前面加to+方向
    

    那么大家猜猜如果这样子写颜色会变成什么样子,相信很多人会觉得是蓝色在上面,红色在下面,请看下图:

    例2
    大家会有疑问吧!为什么是红色在上面?
    注意:渐变比较特殊,代码是从后面往前读取.所以是先红色,再蓝色。

    还可以用角度值来改变渐变方向
    如:45deg
    background-image:linear-gradient(45deg,blue,red)

    如何让渐变变得明显
    如果想让颜色的分界线很明显
    要在颜色后面加百分比 如:

    background-image:linear-gradient(to top,blue 50%,red 50%) 
    
    例3

    很神奇吧,接下来小编来教你怎么用渐变来画网格线

    background-image:repeating-linear-gradient(to top,red 0,red 10px,green 10px,green 20px)
    
    例4

    大家可能不懂为什么要这样子写,给大家讲解一下渐变的原理


    image.png

    repeating-linear-gradient() 和 repeating-radial-gradient()。
    它们的工作方式跟前两者类似,只有一点不同:色标是无限循环重复的,直到填满整个背景。
    所以他们的界限要有准确的规定


    例5

    所以要规定明显的百分比或px值.


    2.径向渐变

    径向渐变分为圆形椭圆形
    圆形渐变写法

    background-image:radial-gradient(circle,red 30%,blue 30%)(圆)

    例6
    方向

    background-image:radial-gradient(circle at center, red 30%,blue 30%)(圆)
    居中
    at left top
    也可以用两个像素值 分别表示x轴和y轴

    注意这个的位置是用at,千万不要和线性渐变混淆了

    椭圆形渐变写法:

     background-image:radial-gradient(ellipse 100px 50px at 50% 50%, red 30%,blue 30%)(椭圆)
                                                  at前面的100px和50px表示椭圆的大小
    这里要特别注意一下:椭圆前面一定要写大小,方向和上面等同
    
    例8

    相关文章

      网友评论

          本文标题:第八章 圆角样式和css渐变

          本文链接:https://www.haomeiwen.com/subject/qfiniktx.html