八、CSS新特性二

最新推荐文章于 2023-11-01 14:46:06 发布

永恒的宁静

最新推荐文章于 2023-11-01 14:46:06 发布

阅读量311

点赞数

分类专栏： HTML5+CSS 文章标签： css css3 html html5 前端

本文链接：https://blog.csdn.net/weixin_42710036/article/details/129118692

版权

文章目录

一、CSS3多背景和圆角
二、怪异盒子模型
三、多列属性
四、H5多列布局瀑布流
五、CSS3线性渐变
- 5.1 线性渐变
- 5.2 径向渐变
六、CSS3过渡动画
七、CSS3 2D
八、CSS3动画

一、CSS3多背景和圆角

css3多背景，表示CSS3中可以添加多个背景。
CSS3圆角
border-radius: 0px;
如果是正方形值给到宽和高的一半会得到正圆。
取值：
一个值：代表4个角
两个值：第一个值代表左上右下第二值代表右上左下
三个值：第一个值代表左上第二个值表右上左下第三个值代表右下
四个值：第一个值代表左上，第二个值代表右上第三个值代表右下第四个值代表左下
特殊取值
border-radius: 30px; 水平半径和垂直半径都为30px;
border-radius: 30px/100px; 水平半径30px,垂直半径100px;

二、怪异盒子模型

标准盒子模型 w3c官方盒子模型
一个盒子有宽高外边距内填充边框，这几个属性能够决定盒子的大小和位置，标准盒子模型的计算：
实际宽度=width+左右padding+左右border+左右margin
实际高度=height+上下padding+上下border+上下margin
IE怪异盒子模型
触发：box-sizing: border-box;
实际宽度=css的宽度(内容，内边距，边框)+左右margin
实际高度=css的高度(内容，内边距，边框)+上下margin

三、多列属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5学习</title>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <style type="text/css">
        *{
     
            margin: 0;
            padding: 0;
        }
        .box{
     
            height: 600px;
            background-color: pink;
            /* 列数 */
            column-count: 5;
            /* 列间距 */
            column-gap: 50px;
            /* 列间间隔线 */
            column-rule: 5px solid rebeccapurple;
            /* 列宽  */
            column-width: 50px;
            /* 检索列的高度
            auto 填满父元素的高度后第一列不足再去第二列以此类推
            balance 是均分的，跟进列数平均分配到不同的列 */
            column-fill: auto;
        }
        .box h2{
     
            /* 
            检索跨列
            all代表跨所胡列
            none代表不跨列 
            */
            column-span: all;
        }
      

        
        
        
    </style>
</head>
<body>
    <div class="box">
        <h2>多列布局</h2>
        <p>我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！
            我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！
            我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！
            我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！
            我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！
            我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！
            我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵，来自老百姓！我是一个兵&