css学习一

    技术2022-07-11  89

    一直知道css很强大,最近整理了一些

    1、linear-gradient css 中的一个渐变的函数,用于创建一个表示两种或多种颜色线性渐变的图片 用在三个场景下:background, background-img, border-img (1)background

    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); // 左上角开始,颜色渐变

    如下图:

    (1)background-img

    background-image: linear-gradient( red 10%, yellow 20%, blue);

    如下图:

    (3)border-img

    width: 200px; height: 200px; border: 100px solid; border-image-source: url(./timg.jpg); border-image-slice: 400; border-image-slice: 50;

    border-image-slice: 200;

    2、animation和上面linear-gradient联合起来,是的页面背景渐变且美观

    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; // 设置成400%很有必要 animation: gradient 15s ease infinite; @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

    如下图:

    Processed: 0.012, SQL: 9