css3新增样式三--线性渐变和径向渐变，resize，多栏布局

最新推荐文章于 2023-12-20 17:00:00 发布

weixin_43700362

最新推荐文章于 2023-12-20 17:00:00 发布

阅读量223

点赞数

分类专栏： css3 文章标签： css

本文链接：https://blog.csdn.net/weixin_43700362/article/details/103642567

版权

本文介绍了CSS3中的新特性，包括线性渐变、径向渐变的使用方法，详细阐述了各种渐变效果的创建及方向设置。此外，还讲解了用户调整元素尺寸的`resize`属性以及多栏布局的实现，包括`column-count`、`column-width`、`column-gap`和`column-rule`等属性的应用。

摘要由CSDN通过智能技术生成

一线性渐变

（1）

div{
        width: 400px;
        height: 400px;
        border: 1px solid red;
        margin-left: 20px;
        background: linear-gradient(red,blue);  
        注意渐变的颜色至少两个。
        }

效果如下：
在这里插入图片描述
（2）0-100 纯红色
100-200 红蓝渐变
200-300 蓝黄渐变
300-结束纯黄色
效果如下：

 background: linear-gradient(red 100px,blue 200px,yellow 300px);

在这里插入图片描述
（3）可以设置渐变的方向

  background: linear-gradient(to right,yellow,red) 
  to left/right/top  或者是角度
   background: linear-gradient( 90deg,yellow,red)
   （上面是0度，右面90度，下面180度，左面270度，）

两种方式的结果都是下图ÿ