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

最新推荐文章于 2024-08-20 13:54:32 发布

weixin_43700362

最新推荐文章于 2024-08-20 13:54:32 发布

阅读量253

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_43700362/article/details/103642567

版权

css3 专栏收录该内容

12 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一线性渐变

（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度，）

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

在这里插入图片描述
（4）重复的线性渐变（纯色+渐变色）：

   background: repeating-linear-gradient( yellow 0px,yellow 50px,blue 150px);

此时重复的是50px的黄色，100px的黄蓝渐变。
效果如下：

在这里插入图片描述
（5）重复的线性渐变（渐变色）：

background: repeating-linear-gradient(yellow 150px,blue 300px);

此时重复的是150px的黄蓝渐变色，效果如下：
在这里插入图片描述

二径向渐变

（1）至少两种颜色

  background:radial-gradient(yellow ,blue );
  默认颜色从圆心开始

效果如下：
在这里插入图片描述
（2）颜色距离

  background:radial-gradient(yellow 60px,blue 120px);

圆心至方圆60px是纯黄色，60-120是黄蓝渐变色。120-结束是纯蓝色。
效果如下：
在这里插入图片描述
（3）设置圆心位置

 background:radial-gradient(at center top, yellow ,blue );

水平位置是center，垂直位置为top。注意用逗号和颜色分开，
位置还可以用百分号表示。如 40% 50%。
效果如下：
在这里插入图片描述
（4）重复的径向渐变

 background: repeating-radial-gradient( red 60px,blue 100px );

此刻重复的是40px的红蓝渐变
效果如下：
在这里插入图片描述

用户调整元素尺寸

resize:horizontal/vertical/both/none.
分别是修改宽度，高度，宽高都可以修改，宽高都不可以修改。
其中，可以修改大小的时候，需要配合 overflow: hidden使用。
当设置了用户可以修改元素大小时候，元素右下角有一个“三角形 ”，拖动就可以改变大小了。
在这里插入图片描述

多栏布局

类似报纸的格式
（1）给一个div设置： column-count: 3;
把一个div分成了三栏。
效果如下：
在这里插入图片描述
首先竖着写，之后再写第二栏，第三栏。
（2） column-width: 210px;
设置每一栏的宽度，注意，不可与column-count同时设置。
效果如下：

（3） column-gap: 100px; 栏目与栏目之间的距离。

  column-count: 3;
     column-gap: 100px;

效果如下：
在这里插入图片描述
（4）column-rule:各个栏之间的线条

  column-count: 3;
     column-rule: 10px solid blueviolet;

效果如下：
在这里插入图片描述
（5） column-span横跨的栏目数量，一般是给题目设置。值为all或1.
题目默认是跨一栏。

h3{
    column-span: all;
    }

结果如下：
在这里插入图片描述