web学习笔记--css(4)-css3新增

最新推荐文章于 2023-07-29 17:04:43 发布

原创最新推荐文章于 2023-07-29 17:04:43 发布 · 933 阅读

0 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS3新增的选择器、文本样式、边框及背景属性等，包括属性选择器的使用方法、文本溢出处理、边框圆角设置、背景图片应用、渐变效果制作及2D和3D转换技巧。

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

CCS学习系列笔记
web学习笔记–css(1)
web学习笔记–css(2)
web学习笔记–css(3)
web学习笔记–css(4)-css3新增

web学习笔记–css(4)-ccs3新增

1.css现状

01 浏览器支持程度差，有些需要添加私有前缀
02 移动端优于PC段
03 不断改进中

2.css3新增选择器

2.1属性选择器

1）根据属性选择
E[att]：选择具有att属性的E元素

2）根据属性值选择
E[att = “val”] 选择具有att属性且属性值为val的E元素

3）E[att ~= “val”]选择具有att属性并且属性值有多个，其中一个值等于val的E元素
4）E[att^= “val”] 选择具有att属性，并且属性值是以val开头的E元素
5）E[att$= “val”] 选择具有att属性，并且属性值是以val结尾的E元素
5）E[att*= “val”] 选择具有att属性，并且属性值是含有val的E元素

总代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*E[att]：选择具有att属性的E元素*/
        /*根据属性选择*/
        /*第1种*/
        input[value]{
            background-color: red;
        }
        input[name]{
            background-color: green;
        }
        input[type]{
            background-color: purple;
        }
        /*第2种*/
        /*E[att = "val"]*/
        /*选择某个属性值为vip2的*/
        input[value = "vip2"]{
            background-color: white;
        }
        /*第3种*/
        input[style ~="30px" ]{
            background-color: yellow;
        }
        /*第4种*/
        /*以v开头的*/
        input[value ^= "v"]{
            background-color: orange;
        }
        /*第5种*/
        /*以1结尾的*/
        input[value $= "1"]{
            background-color: blue;
        }
        /*第6种*/
        /*含有s的*/
        input[name *= "s"]{
            background-color: mediumaquamarine;
        }

    </style>
</head>
<body>
<input type="text" value="姓名" style = "padding: 10px 30px 20px" name="username"><br>
<input type="text" value="姓名" style = "padding: 25px 15px 35px" name="good"><br>
<input type="password" name="password"><br>
<input type="button" value="vip1"><br>
<input type="button" value="vip2"><br>
<input type="button" value="vip3"><br>

</body>
</html>

2.2伪元素选择器

又称虚拟选择器，或者伪对象选择器

01 E::first-letter 设置元素内的第一个字符的样式，针对的是块级元素

02 E::first-line 设置元素内的第一行样式

03 E::before 在某个之前插入内容

04 E::after 在某个之后插入内容

01-04代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选择P标签中第1个字符*/
        p::first-letter{
            font-size: 30px;
            color:blue;
            background-color: red;
        }
        /*选择P标签中第1行字符*/
        p::first-line{
            color: green;
            background-color: yellow;
        }
        /*在某个之前插入内容*/
        /*在页面中，没有办法选择全部*/
        a::before{
            content: "点击"
        }
        /*在某个之后插入内容*/
        /*在页面中，没有办法选择全部*/
        /*a::after{*/
            /*content: "页面";*/
        /*}*/
        a::after{
            content: url("../img/blue.png");
        }
    </style>
</head>
<body>
    <p>
        上海xx大学
        上海xx大学<br>
        上海xx大学
    </p>
    <a href="#">搜索</a>

</body>
</html>

05 E::selection

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选中p中的文字后显示红色*/
        p::selection{
            color: red;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>
        两只老虎两只老虎<br>
        跑得快 跑得快<br>
        哈哈哈哈 <br>
    </p>

</body>
</html>

2.3 伪类选择器

01 E::first-child：选择的是父元素的第1个子元素E

/*选择父元素的第1个子元素*/
/*ul的第1个li，ol的第1个li*/
li:first-child{
color: red;
background-color: green;
}

02 E::last-child：选择的是父元素的最后一个子元素E

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选择父元素的第1个子元素*/
        /*ul的第1个li，ol的第1个li*/
        li:first-child{
            color: red;
            background-color: green;
        }
        /*选择父元素的最后一个子元素*/
        li:last-child{
            color: yellow;
            background-color: red;
        }
        /*选择父元素的第n个子元素*/
        li:nth-child(3){
            color: pink;
        }
        /*选择偶数*/
        li:nth-child(even){
            background-color: purple;
        }
        li:nth-child(odd){
            background-color: gray;
        }
        li:nth-child(2n-1){
            color: white;
        }


    </style>
</head>
<body>
<ul>
    <li>我是ul的子元素1</li>
    <li>我是ul的子元素2</li>
    <li>我是ul的子元素3</li>
    <li>
        <ol>
            <li>我是ol的子元素</li>
            <li>我是ol的子元素</li>
            <li>我是ol的子元素</li>
        </ol>
    </li>
    <li>我是ul的子元素4</li>
    <li>我是ul的子元素5</li>
    <li>我是ul的子元素6</li>
    <li>我是ul的子元素7</li>
    <li>我是ul的子元素8</li>
    <li>我是ul的子元素9</li>

</ul>

</body>
</html>

3. css3中新增的文本样式

01 文字阴影
02 文字描边
03 文本填充颜色
04 文字换行

文字换行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 400px;
            border: 1px solid red;
            /*设置字母换行*/
            word-break: break-all;
            /*设置在空格处换行*/
            /*word-break: keep-all;*/
        }
    </style>
</head>
<body>
    <div>我要换行       我要换行     我要换行我要换行     我要换行我要换行我要换行我要换行我要换行我要换行我要换行我要换行</div>
    <div>sdffghjksdfghjker   tyuiopwertyuiopwertyu   iopsdfghjklxcvbnmsdffghjksdfghjkertyuiopwertyuiopwertyuiopsd</div>

</body>
</html>

05 文字溢出

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 50px;
            height: 500px;
            border:1px solid blue;

            /*设置文本不换行*/
            white-space: nowrap;

            /*overflow表示溢出*/
            /*hidden 表示溢出的部分隐藏掉*/
            overflow: hidden;

            /*以滚轮的方式显示出来*/
            /*overflow: scroll;*/

            /*clip:把后面没有显示的部分裁掉*/
            /*text-overflow: clip;*/
            /*ellipsis:表示省略，将后面未显示的文字以“...”表示*/
            text-overflow: ellipsis;

        }
    </style>
</head>
<body>
    <div>我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦
        我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦
        我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦
        我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦
        我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦我最喜欢红楼梦</div>

</body>
</html>

4.css3中新增的边框属性

4.1 边框圆角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: yellow;
            margin: 0 auto;

            /*border-radius: 250px;*/
            /*border-radius: 20px;*/
            /*border-radius: 50%;*/

            /*2个参数:左上和右下一起*/
            /*border-radius: 100px 10px;*/
            /*3个参数*/
            /*border-radius: 100px 10px 200px;*/
            /*4个参数：上 右 下 左*/
            /*border-radius: 100px 10px 200px 130px;*/

            /*单独写*/
            /*左上*/
            border-top-left-radius: 50px;

        }
    </style>
</head>
<body>
    <div>

    </div>

</body>
</html>

4.2 边框图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 600px;
            height: 600px;
            margin: 0 auto;
            border: 1px solid black;
            background-color: rgba(33,200,100,0.3);
            /*边框图片*/
            border-image-source:url("../../img/hand.jpg");
            border-image-width:100px;
            /*切割方式*/
            /*总共切4刀，分为9块*/
            /*切出来四个角，边长为300px，*/
            border-image-slice:300;
            border-image-repeat:repeat;
            border-image-outset:100px;


        }
    </style>
</head>
<body>
    <div>我喜欢红楼梦</div>

</body>
</html>

4.3 边框阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        article{
            width: 300px;
            height: 300px;
            background-color: yellow;
            margin: 0 auto;
            /*边框*/
            /*x轴、y轴、模糊程度*/
            box-shadow: 3px 3px 5px black;

            /*设置内阴影*/
            border-radius:50%;
            box-shadow: inset -10px -10px 20px black;
        }
    </style>
</head>
<body>
    <article></article>

</body>
</html>

5.css3中新增的背景属性

5.1 背景颜色
5.2 背景重复
5.3 背景图片
5.4 背景定位
5.5 背景裁切

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 700px;
            height: 700px;
            border:2px solid green;
            background-image: url(../../img/hand.jpg);
            margin: 200px auto;
            background-repeat:no-repeat;
            /*调整背景图片大小*/
            /*background-size:400px 300px;*/
            /*background-size:cover;*/
            /*按照某一条边的比例来计算*/
            background-size:contain;
        }


    </style>
</head>
<body>
    <div></div>

</body>
</html>

5.5 背景裁切
背景剪裁代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 600px;
            height: 600px;
            margin: 200px auto;
            border:100px solid rgba(255,0,0,0.3);
            background-image: url(../../img/blue.png);
            background-repeat:no-repeat;
            padding: 60px;
            /*background-clip: content-box;*/

            /*以下二者要连起来用*/
            background-clip: border-box;
            background-origin: border-box;
        }
    </style>
</head>
<body>
    <div></div>

</body>
</html>

6. 渐变

6.1 线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            width: 400px;
            height: 400px;
            border: 1px solid red;
            color: white;
        }
        p:nth-child(1){
            /*linear-gradient设置线性渐变*/
            /*参数：定义方向，起始颜色，最终颜色*/
            /*background-image: linear-gradient(to bottom,red,blue);*/
            background-image: linear-gradient(to left,red,blue);
        }
        p:nth-child(2){
            /*linear-gradient设置线性渐变*/
            /*参数：第1个参数度数表示方向（90：从左向右）*/
            /*后面的几个参数表示 颜色起始位置到终止位置*/
            background-image: linear-gradient(90deg, red 0, yellow 45%, green 80%,purple 100%);
        }
    </style>
</head>
<body>
    <p>我是线性渐变</p>
    <p>我是线性渐变</p>

</body>
</html>

6.2 径向渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            width: 500px;
            height: 500px;
            border:2px solid black;
        }
        p:first-child{
            /*设置径向渐变*/
            background-image: radial-gradient(red, orange, yellow, green, cyan, blue, purple);
        }
        p:nth-child(2){
            /*变成一个球*/
            border-radius: 50%;
            /*参数：第1个参数：整个渐变的大小(450px，定义在顶端)*/
            background-image: radial-gradient(450px at top left, white 30%, red 70%, darkred 100% );
        }
    </style>
</head>
<body>
    <p>我是径向渐变</p>
    <p>我是个球</p>

</body>
</html>

7. 2D转换

7.1 位移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            width: 400px;
            height: 400px;
            background-color: red;
            transition: 3s;
        }
        .d2{
            width: 400px;
            height: 400px;
            background-color: blue;

        }
        .d1:hover{
            transform: translate(400px, 400px);
        }
    </style>
</head>
<body>
<div class="d1">盒子1号</div>
<div class="d2">盒子2号</div>
</body>
</html>

7.2 缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 500px;
            border: 2px solid red;
            margin: 500px auto;
        }
        p{
            width: 500px;
            height: 500px;
            border: 2px solid blue;
            /*变换的时间*/
            transition: 3s;
        }
        p:hover{
            /*scale:缩放,2表示放大2倍*/
            /*transform: scale(2);*/
            /*参数：x轴、y轴上的缩放*/
            transform: scale(1,2);
        }
    </style>
</head>
<body>
    <div>
        <p>我现在170，我要长到180</p>
    </div>

</body>
</html>

7.3 旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 2px solid red;
            margin-bottom: 50px;
            /*background-color: green;*/
        }
        .d1{
            background-color:green;
            margin:150px auto;
            transition: 2s;
        }
        .d2{
            background-color: yellow;
            margin: 150px auto;
            transition: 2s;
        }
        /*鼠标经过时顺时针旋转*/
        /*deg是单位，表示度*/
        .d1:hover{
            transform: rotate(45deg);
            background-color: red;
        }
        .d2:hover{
            transform: rotate(-150deg);
            transform-origin: top right;
        }
    </style>
</head>
<body>
    <div class="d1">我要顺时针旋转</div>
    <div class="d2">我要逆时针绕着右上角旋转</div>

</body>
</html>

7.4 倾斜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         div{
            width: 300px;
            height: 300px;
            border: 1px solid blue;
            margin: 300px auto;
            transition: 2s;
        }
        .d1:hover{
            /*只要是变换，一定是写在transform里面的*/
            transform: skew(45deg);
            background-color: red;
        }
        .d2:hover{
            /*transform: skew(-45deg);*/
            /*在x轴，y轴*/
            /*transform: skew(-45deg,30deg);*/
            /*在y轴上*/
            transform: skewY(45deg);
            /*绕某个边*/
            transform-origin:left ;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>

</body>
</html>

8. 3D转换

demo1代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            perspective: 1000px;
        }
        .out{
            width: 500px;
            height: 500px;
            border: 2px solid red;
            margin: 100px auto;
            /*要想让in透视，给它的父元素加景深perspective*/
            /*perspective: 500px;*/
            perspective: 1000px;
            transition: 3s;

            /*搭建3D效果*/
            transform-style: preserve-3D;
        }
        .in{
            width: 300px;
            height: 300px;
            border:2px solid blue;
            margin: 100px auto;
            color: red;
            font-size: 20px;
            line-height: 60px;
            color: white;
            transition: 1s;
            box-shadow:10px  10px 10px black;
        }
        .in:hover{
            transform: rotateX(45deg);
            transform-origin: bottom;
            /*transform-origin: top right;*/
        }
        p{
            margin-left: 20px;
            background-color: blue;
            width: 50px;
            height: 50px;
            text-align: center;
        }
        .out:hover{
            transform: rotateY(80deg);

        }
    </style>
</head>
<body>
    <div class="out">
        <div class="in">
            <p>葵</p>
            <p>花</p>
            <p>点</p>
            <p>穴</p>
            <p>手</p>
        </div>
    </div>

</body>
</html>

3D盒子代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @keyframes box {
            from{
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
            }
            to{
                transform: rotateX(270deg) rotateY(69deg) rotateZ(360deg) scale(1.2);
            }
        }
        *{
            padding: 0;
            margin: 0;
        }
        body{
            perspective: 5000px;
            /*background-image: url(imgs/bj1.jpg);*/
        }
        .d1{
            width: 150px;
            height: 150px;
            /*border: 1px solid red;*/
            margin: 200px auto;
            padding: 150px;
            perspective: 5000px;
            /*transition: 8s;*/
            transform-style:preserve-3D ;
            animation: box 8s ease-in infinite  alternate;
        }
        .box{
            width: 150px;
            height: 150px;
            border: 1px solid blue;
            position: relative;
            perspective: 5000px;
            transform-style:preserve-3D ;

        }
        .box li{
            list-style: none;
            width: 150px;
            height: 150px;
            position: absolute;
            text-align: center;
            font-size: 40px;
            line-height: 150px;
            /*transform-style:preserve-3D ;*/
        }
        li:nth-child(1){
            /*background-color: red;*/
            background-color: rgba(63, 255, 29, 0.5);
            left: 0;
            top: -150px;
            transform: rotateX(-90deg);
            transform-origin: bottom;
        }
        li:nth-child(2){
            /*background-color: blue;*/
            background-color: rgba(134,20,100,0.5);
            left: -150px;
            top: 0;
            transform: rotateY(90deg);
            transform-origin: right;
        }
        li:nth-child(3){
            /*background-color: yellow;*/
            background-color: rgba(255, 72, 55, 0.5);
            left: 0;
            top: 0;
        }
        li:nth-child(4){
            /*background-color: green;*/
            background-color: rgba(40, 201, 111, 0.5);
            left: 150px;
            top: 0;
            transform: rotateY(-90deg);
            transform-origin: left;
        }
        li:nth-child(5){
            /*background-color: mediumpurple;*/
            background-color: rgba(209, 54, 189, 0.5);
            left: 0;
            top: 150px;
            transform: rotateX(90deg);
            transform-origin: top;
        }
        li:nth-child(6){
            /*background-color: lightpink;*/
            background-color: rgba(60,1110,200,0.5);
            transform: translateZ(150px);
        }
        li:nth-child(7){
            transform: translateZ(75px);
        }
        .d1:hover{
            transform: rotateX(270deg) rotateY(69deg) rotateZ(360deg) scale(1.2);
        }
        li img{
            width: 150px;
            height: 150px;
        }


    </style>
</head>
<body>
    <div class="d1">
        <ul class="box">
            <!--一共6个面-->
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <!--<li><img src="imgs/1.jpg" alt=""></li>-->

            <!--下面可以插入自己电脑的图片-->
            <!--<li><img src="imgs/g1.gif" alt=""></li>-->
            <!--<li><img src="imgs/g2.gif" alt=""></li>-->
            <!--<li><img src="imgs/g3.gif" alt=""></li>-->
            <!--<li><img src="imgs/g4.gif" alt=""></li>-->
            <!--<li><img src="imgs/g5.gif" alt=""></li>-->
            <!--<li><img src="imgs/g6.gif" alt=""></li>-->

            <!--<li><img src="imgs/1.jpg" alt=""></li>-->
            <!--<li><img src="imgs/2.jpg" alt=""></li>-->
            <!--<li><img src="imgs/3.jpg" alt=""></li>-->
            <!--<li><img src="imgs/4.jpg" alt=""></li>-->
            <!--<li><img src="imgs/5.jpg" alt=""></li>-->
            <!--<li><img src="imgs/6.jpg" alt=""></li>-->

        </ul>
    </div>

</body>
</html>