美文网首页
css3-线性颜色渐变linear-gradient

css3-线性颜色渐变linear-gradient

作者: AssertDo | 来源:发表于2019-08-26 16:25 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            /*添加渐变:渐变不是一个单一钩,它产生的是图像,所以需要使用background*/
            /*linear-gradient(方向,开始颜色 位置,颜色2 位置,颜色3 位置...);*/
            /*方向:
            to top:0deg
            to right:90deg
            to bottom:180deg --默认值
            to left:270deg*/
            /*background: linear-gradient(to right,red,blue)*/;
            background: linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

相关文章

  • css3渐变

    线性渐变background-image: linear-gradient(方向, 初始颜色 , 渐变到颜色1 峰...

  • css3-线性颜色渐变linear-gradient

  • 总结HTML5(二)

    渐变 线性渐变 linear-gradient linear-gradient:(angle,color val...

  • 第八章 圆角样式和css渐变

    一,颜色渐变 1.线性渐变(像刷油漆) 写法:background-image:linear-gradient(b...

  • 颜色渐变

    线性渐变:background : linear-gradient(起始颜色到结束颜色) 还可以指定角度 默认是从...

  • gradient(渐变)

    gradient(渐变) 生成渐变颜色的背景图片 CSS3渐变分为linear-gradient(线性渐变)和ra...

  • --- > css3-渐变

    gradient(渐变) 生成渐变颜色的背景图片 CSS3渐变分为linear-gradient(线性渐变)和ra...

  • 线性渐变

    线性渐变 linear-gradient 渐变分4种 线性渐变 径向渐变 重复线性渐变 重复径向渐变重点学习线性渐...

  • CSS实现条纹背景

    实现方法:CSS线性渐变linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。li...

  • 入坑线性渐变linear-gradient

    线性渐变linear-gradient的表达式:linear-gradient( [ | ,]? [, ...

网友评论

      本文标题:css3-线性颜色渐变linear-gradient

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