css之“css3的新特性”

最新推荐文章于 2024-09-23 22:05:55 发布

空投在我怀里

最新推荐文章于 2024-09-23 22:05:55 发布

阅读量144

点赞数

分类专栏： web前端css 文章标签： html css css3

本文链接：https://blog.csdn.net/wrk2466836002/article/details/120633802

版权

web前端css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS3中的新特性，包括圆角边框、多重背景、渐变、RGBA、阴影效果、文本溢出处理、2D/3D转换、过渡效果、动画、CSS变量、多列布局、Flex布局、媒体查询以及盒模型的使用。通过实例展示了这些特性的实际应用，帮助读者更好地理解和掌握CSS3在网页设计中的强大功能。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*1.圆角边框*/
        /*2.多重背景*/
        /*3.渐变*/
        /*4.RGBA*/
        /*5.文字和盒子阴影*/
        /*6.文本溢出、整字换行、换行规则以及书写模式*/
        /*7.2D 3D转换*/
        /*8.过渡*/
        /*9.动画*/
        /*10.css变量*/
        /*11.多列*/
        /*12.fel*/
        /*13.媒体查询*/
        /*14.盒模型*/
        *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .div-a{
            width: 500px;
            height: 400px;
            border: 1px solid red;
            border-radius: 5px;
            background: url("./images/flower.gif") right bottom no-repeat,
            url("./images/paper.jpg")left bottom repeat;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            text-shadow: 2px 2px 4px #000000;
        }
        .div-b{
            width: 200px;
            height: 100px;
            margin-top: 50px;
            background-image: linear-gradient(140deg,#EADEDB 0%,#BC70A4 50%,#BFD641 75%);
        }
        .div-c{
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .div-d{
            width: 200px;
            height: 100px;
            transition: all 0.5s;
            background: rgba(0,0,0,0.2);
        }
        .div-d:hover{
            transform: translate(50px,50px);
        }
        .div-e{
            width: 200px;
            height: 100px;
            background: rgba(0,0,0,0.2);
        }
        @-webkit-keyframes myanimationB {
            0%{background: red}
            25%{background: yellow}
            50%{background: blue}
            75%{background: green}
            100%{background: rebeccapurple}
        }
        .div-e:hover{
            color: red;
            /*简写*/
            animation:myanimationB 1s 1s ease infinite alternate;
            /*动画的名字，播放时间，延时时间，动画效果，播放次数，播放顺序*/

        }
        :root{
            /*全局定义*/
            --blue: #1e90ff;
            --white: #ffffff;
            --red:red;
        }

        .div-f{
            /*column-count: 3; !*规定元素应被划分的列数*!*/
            /*column-width: 50px;!*列指定建议的最佳宽度*!*/
            columns: 3 100px;/*简写*/

            /*column-rule-style: solid;!*列之间的规则样式*!*/
            /*column-rule-color: lightblue;!*列之间的颜色*!*/
            /*column-rule-width: 1px;!*列之间的规则宽度*!*/
            column-rule: 1px solid lightblue;/*简写*/

            column-gap: 40px;/*列之间的间隙*/
        }
        .div-g{
            width: 600px;
            height: 500px;
            background: #333333;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .div-g>p{
            width: 100px;
            height: 100px;
            background: #BC70A4;
        }
        .div-l{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            padding: 20px;
            /*浏览器显示的宽度为142，因为盒模型,可以使用box-sizing*/
            box-sizing: border-box;/*这样总宽度就为100了*/
        }
        @media screen and (max-width: 450px){
            .div-l{
                background: var(--red);
            }
        }
    </style>
</head>
<body>
   <div class="div-a">css3的新特性</div>
   <div class="div-b"></div>

   <div class="div-c">文本溢出，文本不会换行，文本会在在同一行上继续,内容会被修剪，并且其余内容是不可见的</div>

   <div class="div-d"></div>
   <div class="div-e">动画</div>
   <div class="div-f">
    话说天下大势，分久必合，合久必分：周末七国分争，并入于秦；及秦灭之后，楚、汉分争，又并入于汉；汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃，共相辅佐；时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起，只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十馀丈，飞入温德殿中。秋七月，有虹现于玉堂，五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起
   </div>
   <div class="div-g">
        <p></p>
   </div>
   <div class="div-l">盒子模型</div>

</body>
</html>