gradient css

最新推荐文章于 2022-06-11 16:54:17 发布
最新推荐文章于 2022-06-11 16:54:17 发布
阅读量157 收藏
点赞数
原文链接：http://www.cnblogs.com/Mr-Joe/p/3200938.html
版权 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script src="js/jq.js"></script>
    <script src="js/ko.js"></script>
    <script src="resources/lib/core.js"></script>
    <script src="resources/lib/nav.js"></script>
    <script src="js/index.js"></script>

    <style>
        .container {
            width: 620px;
            height: 415px;;
            display: -ms-grid;
            -ms-grid-columns: 5px (200px 5px)[3];
            -ms-grid-rows: 5px (200px 5px)[2];
            border: 1px solid red;
        }

        .item {
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;;
            border: 1px solid deepskyblue;
        }

        @keyframes fadeOut {

            0% {
                opacity: 1;
            }

            50% {

                transform: scale(1.5) rotateX(90deg) ;
            }

            100% {
                opacity: 1;
            }

        }

        .item:hover {
            animation: fadeOut 1s;
        }



        .container .item:first-child {
            -ms-grid-column: 2;
            -ms-grid-row: 2;
            background-image:  linear-gradient(45deg,yellow 0%,green 50%,blue 100%);

        }

        .container .item:nth-child(2) {
            -ms-grid-column: 4;
            -ms-grid-row: 2;
            background-image:  linear-gradient(225deg,yellow 0%,green 50%,blue 100%);
        }

        .container .item:nth-child(3) {
            -ms-grid-column: 6;
            -ms-grid-row: 2;

            background-image:  radial-gradient(circle,yellow 0%,green 50%,blue 100%);
        }

        .container .item:nth-child(4) {
            -ms-grid-column: 2;
            -ms-grid-row: 4;
            background-image:  radial-gradient(ellipse,yellow 0%,green 50%,blue 100%);

        }

        .container .item:nth-child(5) {
            -ms-grid-column: 4;
            -ms-grid-row: 4;
            background-image:  radial-gradient(farthest-side at 40px 40px,yellow 0%,green 50%,blue 100%);
        }

        .container .item:nth-child(6) {
            -ms-grid-column: 6;
            -ms-grid-row: 4;
            background-image:  radial-gradient(closest-side at 140px 140px,yellow 0%,green 50%,blue 100%);
        }


    </style>
</head>
<body>


<div class='container' data-bind='foreach:people'>
    <div class='item' data-bind='text:item'>

    </div>

</div>

</body>
</html>

 

 

 

 

转载于:https://www.cnblogs.com/Mr-Joe/p/3200938.html

weixin_34375251
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css渐变
m0_74913905的博客
03-30 155
在我们自己设计网页的时候，为了好看美观，颜色可谓是最让人头疼的一部分。CSS 渐变使可以显示两种或多种指定颜色之间的平滑过渡。今日介绍两种渐变类型。让我们来玩一玩，看能玩出什么花来。
CSS 渐变
张恒华的博客
03-20 2859
CSS 渐变CSS 渐变CSS 线性渐变语法线性渐变 - 从上到下（默认）实例线性渐变 - 从左到右实例线性渐变 - 对角线实例使用角度语法实例使用多个色标实例实例使用透明度实例重复线性渐变实例CSS 径向渐变语法径向渐变-均匀间隔的色标（默认）实例径向渐变-不同间距的色标实例设置形状实例重复径向渐变实例 CSS 渐变 CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。 CSS 定义了两种渐变类型： 线性渐变（向下/向上/向左/向右/对角线） 径向渐变（由其中心定义） CSS 线性渐变 如需
vue编译报错Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`
weixin_42260782的博客
06-18 2711
在导入项目时候，报错Gradient has outdated direction syntax. New syntax is like to left instead of right 渐变有过时的方向语法。新语法与 “to left” 类似。 意思是这个写法过时了，需要加上 to ,然后改变方向,比如 right 改为 to left ,left 则改为 to right. styles.css:116:3,找到这个位置，前面加上to（别问为什么上面没加，因为上面没报错） 保存，编译： ...
vue执行时警告
qq_45888887的博客
04-19 767
项目场景： 提示：这里简述项目相关背景： vue执行时警告 原因分析： 提示：这里填写问题的分析： 翻译了报错信息后，Gradient has outdated direction syntax. New syntax is like to left instead of right. 翻译：渐变有过时的方向语法。新语法与 “to left” 类似。 意思是这个写法过时了，需要加上 to ,然后改变方向,比如 right 改为 to left ,le
Gradient has outdated direction syntax. New syntax is like `closest-side at 0 0` instead of `0 0`...
小小笨南瓜
02-14 1449
Gradient has outdated direction syntax. New syntax is like closest-side at 0 0 instead of 0 0, closest-side. 增加了 css样式 报出警告 background-image: radial-gradient(50% 50%, #ffffff 50%, #eaf2fd 100%); 查看radial-gradient 根据警告提示(代码校验比较严格) background-ima
CSS的一个bug，Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`....
听胡说
08-23 904
在vue重新渲染页面的时候，报了一个错误： 翻译了报错信息后，Gradient has outdated direction syntax. New syntax is like to left instead of right. 翻译：渐变有过时的方向语法。新语法与 “to left” 类似。 意思是这个写法过时了，需要加上 to ,然后改变方向,比如 right 改为 to le...
解决“Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.“警告
m0_46403770的博客
02-10 1148
css的一个bug，在vue渲染界面的时候出现： 提示渐变的语法过时了，改为新语法即可，如下： left 改为 to right right 改为 to left top 改为 to bottom bottom 改为 to top
详解CSS3中使用gradient实现渐变效果的方法
09-25
主要介绍了详解CSS3中使用gradient实现渐变效果的方法,是CSS3入门学习中的基础知识,需要的朋友可以参考下
深入剖析CSS中的线性渐变linear-gradient
09-24
在CSS中，线性渐变可以通过`linear-gradient`函数来创建。 **语法** ```css linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? [, ]+) ``` 其中，`<angle>`用于指定渐变线的角度，`<side-or-corner>`则使用...
纯css3 gradient颜色渐变立体文字特效代码
11-24
随着技术的发展，CSS3引入了许多新的特性，其中包括gradient（渐变）效果，使得设计更加丰富多彩。本篇将深入探讨如何使用纯CSS3的gradient颜色渐变来创建立体文字特效。 首先，让我们理解CSS3中的两种主要类型的...
CSS 背景渐变
10-10
CSS 设计指南学习小结
gradient
03-15
在CSS（层叠样式表）领域，"gradient"是一个重要的概念，它用于创建平滑的颜色过渡效果，使得设计更加丰富多彩和动态。渐变可以是线性的，也可以是径向的，为网页元素背景提供了一种优雅的方式来展示颜色变化，而非...
css 语法 ：Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`
Aurora_juan的博客
04-13 308
为了清理终端的错误提醒，发现了以上的提醒 原来是gradient的语法过时了 旧的 background-image: linear-gradient(bottom,#ffb400,#f2f2f2); 新的 background-image: linear-gradient(to bottom,#ffb400,#f2f2f2); 总结： 将left, right, top, bottom 替换成 （to left, to right, to bottom, to top) ...
vue编译报错 Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.
去他喵的博客
01-14 1363
vue编译报错 翻译了报错信息，Gradient has outdated direction syntax. New syntax is like to left instead of right. 翻译：渐变有过时的方向语法。新语法与 “to left” 类似 意思是这个写法过时了，需要加上 to 然后就可以了 ...
Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.
q515656712的博客
08-15 1895
当Vue 引用CSS 会提示以下错误： 语法过时。。。。。 Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`. 并随之带有 一堆 css-loader 路径 Failed to compile. ./src/assets/css/button.css (./...
VUE提示Gradient has outdated direction syntax
llykingsohyun的博客
05-28 385
VUE提示Gradient has outdated direction syntax 启动项目，发现之前没有问题的项目今天突然出现了警告，而且警告是一模一样的 Gradient has outdated direction syntax. New syntax is like to left instead of right. 经过排查以及资料搜索，发现是因为渐变的写法变了 旧代码是 background: -webkit-linear-gradient(left,$gradients-color.
Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`
codeBbHs的博客
06-11 359
一个css的报错提示
数据分析的核心技能和方法
最新发布
07-19
数据分析的核心技能和方法
linear-gradient Css规则
05-16
linear-gradient是CSS3新增的一个渐变色属性，可以用来实现从一种颜色渐变到另一种颜色的效果。它的语法如下： ``` background: linear-gradient(direction, color-stop1, color-stop2, ...); ``` 其中，direction是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值