CSS3新增的相关属性

---

前言

一起看一哈“C3”的那些新属性叭，看看它们有什么奇妙的作用ba，内容有限，深入学习的话还是得自己丰衣足食ao~

---

CSS3属性

一，实现深色模式和浅色模式的切换

用css实现这个功能首先需要在复选框选中后相应的内容可以去进行想要的变化，因此 “：checked” 这个伪类选择器必不可少，下面说下“checked”伪类选择器的作用：

1.1，”checked“作用

“：checked” css伪类选择器表示任何处于选中状态下的radio，checkbox，或者select中的option元素。用户通过勾选/选中元素或取消勾选/取消选中，来改变该元素的 :checkbox 状态。

注：上述简单引用MDS，其中的radio和checkbox常用

1.2，语法

：checked{
    margin-left:25px;
    border:1px solid white
}

注：（冒号）checked{}（花括号）然后写要修改的样式即可

1.3，例

HTML块

<div class="anye">
        <input type="checkbox" id="color_oc">
        <label for="color_oc"></label>
        <div class="article">
            <p>
                《长津湖》全情全景地还原了71年前抗美援朝战场上那场史诗战役，影片对战争群像的恢弘呈现，和对个体命运的深切关怀，令许多观众无法控制自己的泪水。每个角色的细节刻画都令观众们印象深刻。战场外，这些战士们是毛头小子、邻家大哥……战场上，他们的名字是英雄。有观众评价：“伍千里，伍万里，余从戎，谈子为，梅生，雷睢生，平河……少见的战争片能让我记住每个角色的名字，既文雅又饱含着期待和寓意。而且演员与角色契合度堪称优美，从不同角度呈现了他们为什么是最可爱的人，把一个连队的生命力表现得淋漓尽致。”（北青网
                评） [56] 。
                《长津湖》中国影史上最大投资规模、参演人数最多的战争题材电影。作品穿越历史岁月的硝烟，第一次将镜头对准了抗美援朝东线战场的长津湖战役，第一次在银幕上表现了前所未有的宏阔的战争奇观，第一次生动塑造了以七连为代表的第九兵团这些鲜为人知的英雄群像，将这场气壮山河的战斗拍得惊心动魄感人肺腑。尤其是影片体现了更加彻底也更加现代的战争观和历史观，达到了中国战争电影新高度。（人民资讯
                评） [70]
                影片《长津湖》以史诗级的手法，全景式展示了长津湖战役的全貌：从美军仁川登陆，悍然越过三八线进犯中朝边境，到志愿军跨过鸭绿江出国作战，抗美援朝保家卫国；从长津湖战役全线爆发，我志愿军战士重创敌人，到美军兵败后退，撤出兴南港……美军装备之强大、我志愿军斗志之昂扬，都得到了体现。抗美援朝战争中，武器装备极其落后的志愿军与武装到牙齿的美军形成了鲜明对比，但中国人民志愿军以“钢少气多”力克“钢多气少”，凭借超乎寻常的战术设计与过人的意志，逐步扭转了抗美援朝战争的局势，打出了军威国威，成为当之无愧的“步兵之王”。（澎湃新闻
                评） [99]
            </p>
        </div>
    </div>

注：p标签内容可以多复制几份，查看效果更明显，为了避免篇幅过长就先删为敬了

CSS块

.anye{
            position: relative;
        }

        /* 设置了“label”标签的相关样式 */
        label{
            color: #fff;
            width: 99px;
            height: 33px;
            text-align: center;
            line-height: 33px;
            position:absolute;
            left: 50%;
            margin-left: -50px;
            border-radius: 30px;
            background-color: black;
        }

        input{
            margin: 0;
            /* 隐藏“input”复选框 */
            opacity: 0;
        }

        /* 使用“after”伪元素在“label”标签的后面插入相关内容“关灯” */
        label::after{
            content: "关灯";
        }

        /* 这里就体现出了“checked”伪类选择器的作用，把类名为crticle所在的标签里的相关内容的相关样式进行变化 */
        :checked~.article{
            color: #fff;
            background-color: #222;
        }

        /* 设置选中状态下的label标签的为元素，内容为“开灯” */
        :checked+label::after{
            content: "开灯";
        }

        /* 顾名思义，选中状态下的label标签的文字文本颜色设置为白色 */
        :checked+label{
            color: #fff;
        }

        /* 这里我用了一个“transition”属性来设置完成过渡效果所用的时间，时间为1秒 */
        .article{
            transition: all 1s;
        }

附：这里就不来图片咯，动图很难搞哒
注：本例充分体现了，“after”伪元素和“checked”伪类的作用，“transition”属性是个复合属性，感兴趣的话可去查询，”opacity“我后面见，以上均属除c3的内容，深入学习还得靠大家细细品茶ao~

二，盒子模型（背景）

2.1，释义

盒子模型肯定离不开，margin，padding，border和center这些属性，一个盒子的大小有效范围是（border+padding+center），那么可不可以有效的规定背景的绘制区域呢？

2.2 ， “background-clip” 属性

当然，作用就是规定绘制有效的背景区域

先说值:

1. border-box (默认值，背景绘制的有效范围是整个盒子，也就是边框以内，包括边框)；
2. padding-box （背景绘制的有效范围是内边距以内，当然，包括内边距）；
3. content-box （背景绘制的有效范围是内容在的区域，如果设有宽和高，那么就是宽高的区域）

2.3， 例

HTML块

<div class="border-box">
        border
    </div>
    <div class="padding-box">
        padding
    </div>
    <div class="center-box">
        center
    </div>

CSS块

*{
            margin: 0;
        }
        .border-box{
            width: 300px;
            height: 300px;
            border: 10px solid transparent;
            padding: 20px;
            margin: 10px;
            background-color: red;
            background-clip: border-box;
        }
        .padding-box{
            width: 300px;
            height: 300px;
            border: 10px solid transparent;
            padding: 20px;
            margin: 10px;
            background-color: orange;
            background-clip: padding-box;
        }
        .center-box{
            width: 300px;
            height: 300px;
            border: 10px solid transparent;
            padding: 20px;
            margin: 10px;
            background-color: yellow;
            background-clip: content-box;
        }
        .border-box,.padding-box,.center-box{
            display: inline-block;
        }

附图：

注：上例我列举了所有的背景绘制情况，具体效果运行观察即可，“background-clip”，c3

三，元素的显示与隐藏

3.1 释义

顾名思义，可以让一个元素显示或者隐藏，那么怎么做呢？

3.2 相关属性

display，visibility，opacity

语法和值：

• display：值none（隐藏元素），值block（显示元素），该属性不会保留原有的位置；
• visibility：值hidden（隐藏元素），值visible（显示元素），该值保留原有位置；
• opacity：值0（隐藏元素），值1（显示元素），该值同样保留原有的位置

3,3 语法，效果

HTML块

    <div class="s1">default</div>
    <div class="s2">display</div>
    <div class="s3">visibility</div>
    <div class="s4">opacity</div>

CSS块

div{
            width: 160px;
            height: 90px;
            background-color: orange;
            margin: 10px 0;
        }

        .s2{
            display: none;
        }
        .s3{
            visibility: hidden;
        }
        .s4{
            opacity: 0;
        }

注：具体效果自己运行后观看奥~

3.4 例

HTML块

<div class="box">
        <input type="checkbox" id="yx">
        <label for="yx">点这里</label>
        <span>欢迎来到我的世界~</span>
    </div>

CSS块

*{
            margin: 0;
        }
        /* 隐藏input复选框也离不开opacity的隐藏属性 */
        input{
            opacity: 0;
        }
        label{
            width: 50px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-radius: 20px;
            background-color: green;
        }
        span{
            display: block;
            width: 200px;
            height: 40px;
            margin-top: 10px;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
            background-color: orange;
        }

        /* 选中状态下的相关的元素被隐藏 */
        :checked~span{
            visibility: hidden;
        }

附：

四，文字溢出处理

4.1释义

一些网页的主页往往会有各种各样的处理过多文字的样式，那么具体是怎么实现的呢？

4.2相关属性

1、设置不折行:white-space: nowrap;

2、设置溢出部分文本隐藏：overflow:hidden;

3、在文本末尾加上省略号： text-overflow: ellipsis;

注：上面的属性只是常用的状态，它们有自己对应的值，深入学习的话查阅资料即可

4.3 例

HTML块

<div class="desc">
        10月21日晚21时06分，北京朝阳公安分局发微博公告：
近日，朝阳公安分局接群众举报称，有人在朝阳某小区卖淫嫖娼。对此，警方依法开展调查，将卖淫违法人员陈某卉（女，29岁），嫖娼违法人员李某迪（男，39岁）查获。经审查，上述人员对违法事实供认不讳，目前均已被朝阳公安分局依法行政拘留。
    </div>

CSS块

.desc{
            border: 1px solid black;
            width: 400px;
            white-space: nowrap;
            overflow:hidden;
            text-overflow: ellipsis;
        }

附：

五，边框和三角

5.1 为什么

其实，当两个相邻的边框宽度相等时，它们是以45度的角度对接的，所以通过设置不同的边框属性的不同数值就可以制作不一样的图形

5.2 等腰直角三角形

HTML

<div class="s"></div>

这里直接来个块或行内块元素即可

CSS

.s{
            width: 0;
            height: 0;
            border:100px solid transparent;
            border-bottom-color: green;
        }

注：原理就是设置四个边的宽度为100px，并且把相邻的三个变的边框颜色设置为透明（如本例：只留下了底部边框），那么就实现了制作一个等腰三角形

附：

总结

多多琢磨，望大家每天都超越昨天的自己，最后有什么好的建议和问题大家可以留言评论区ou~