CSS3学习笔记

橘颂_Wendy

已于 2022-08-01 20:09:11 修改

阅读量1.1k

点赞数

分类专栏：前端开发学习笔记文章标签： css3 学习前端

于 2022-07-29 10:19:21 首次发布

本文链接：https://blog.csdn.net/weixin_46121269/article/details/125904726

版权

这篇博客详细介绍了CSS3的新特性，包括CSS2选择器的扩展、文字阴影text-shadow、盒子阴影box-shadow的用法，以及过渡transition、2D和3D转换的应用。此外，还深入探讨了关键帧动画的实现，通过实例展示了如何创建无缝链接、飞翔小鸟和轮播图等动画效果。最后，讲解了边框图片border-image的配置与应用。

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

一、CSS2选择器

选择器	解释说明
E[att]	选择具有att属性的E元素。
E[att=“val”]	选择具有att属性且属性值等于val的E元素。
E[att~=“val”]	选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。

案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
    <style>
        /* 查找具有class属性的li元素
        语法 E[attribute]
         */
        li[class]{
     
            color: yellow;
        }

        li[title]{
     
            color: violet;
        }

        /* 查找具有class属性，并且属性值为s,设置文字大小 */
        li[class="s"]{
     
            font-size: 40px;
            color: red;
        }

        /*查找具有class属性，并且属性值是用空格隔开的，其中有color的值，改变文字颜色为绿色  */
        li[class~="color"]{
     
            color: springgreen;
        }
    </style>
    
</head>
<body>
    <ul>
        <li>这是列表项</li>
        <li class="s1">这是列表项</li>
        <li class="s2 color">这是列表项</li>
        <li class="s3">这是列表项</li>
        <li class="s ">这是列表项</li>
        <li class="s4 color">这是列表项</li>
        <li title="s4">这是列表项</li>
    </ul>
</body>
</html>

二、CSS3选择器

选择器	解释说明
E[attr^=val]	匹配具备attr属性，并且属性值以value开头的E元素
E[attr$=val]	匹配具备attr属性，并且属性值以value结尾的E元素
E:empty	匹配空的E元素
E:not	不匹配某条件的E元素
E:nth-child	匹配某条件的E元素奇数(odd) 偶数(even)

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*匹配有classs属性，并且属性是以c开头的div*/
       /* div[class^="c"]{
            color: orange;
        }*/
        /*匹配有class属性，并且属性值是以1结尾的div*/
       /* div[class$='1']{
            color: salmon;
        }*/
        /*匹配空标签的div*/
        /*div:empty{
            background-color: aqua;
        }*/
        /*不匹配有class属性的div标签*/
       /* div:not([class]){
            background-color: hotpink;

        }*/
        /*匹配奇数(odd) 偶数(even) div*/
       /* div:nth-child(odd){
            color: yellowgreen;
        }*/
        /*匹配第三个div   定义父元素的第三个div*/
        div:nth-of-type(3){
     
            color: blueviolet;
        }

    </style>
</head>
<body>
    <div title="div1">这是第一个div</div>
    <div title="div2">这是第二个div</div>
    <div class="c1">这是第三个div</div>
    <div class="i1">这是第四个div</div>
    <div style="width: 100px;height: 100px;"></div>
</body>
</html>

三、文字阴影text-shadow

text-shadow

后面的值有4个，第一个：X轴，水平阴影位置允许负值。

第二个：y轴，垂直阴影位置，允许负值。

第三个：blur，模糊的距离

第四个：阴影的颜色

案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
     
            /* 向左5个像素，向下5个像素的阴影 */
            text-shadow: 5px 5px 2px red;
        }
        /* text-shadow支持多个阴影设置，用逗号,隔开 */
        .p2{
     
            text-shadow: 0px -5px 2px,0px -5px 2px red;
        }
        /* 火焰字体 */
        .p3{
     
            text-shadow: 0px -1px 4px gold, 0px -5px 10px red, 0px -10px 20px red;
        }
    </style>
</head>
<body>
    <p class="p1">这是段落文字</p>
    <p class="p2">这是段落文字</p>
    <p class="p3">这是段落文字</p>
    <p class="p4">这是段落文字</p>
</body>
</html>

四、盒子阴影box-shadow

box-shadow 属性值

第一个：X轴，水平阴影位置允许负值。

第二个：y轴，垂直阴影位置，允许负值。

第三个：blur，模糊的距离

第四个：spread 阴影的大小

第五个：color 阴影的颜色

第六个：inset 从外层的阴影转换为内部的阴影

注意：盒子阴影不影响盒子里面的内容

案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
     
            width: 500px;
            height: 500px;
            margin: auto;
            border: 1px solid red;
            /* 盒子阴影
                            第一个：X轴，水平阴影位置  允许负值。

							 第二个：y轴，垂直阴影位置，允许负值。

							 第三个：blur，  模糊的距离

							 第四个：spread  阴影的大小

							第五个：color  阴影的颜色

							第六个：inset 从外层的阴影转换为内部的阴影

            注意：盒子阴影不影响盒子里面的内容
            
            */
            box-shadow: 5px -5px 20px 20px red inset;