【CSS3】一些听课记录（样例代码）

本文链接：https://blog.csdn.net/weixin_49133874/article/details/123349306

本文介绍了CSS3中的一些重要特性，包括伪类选择器、边框圆角、渐变效果、过渡效果、动画和字体效果。讲解了如何实现简单的放大效果、绘制几何图形、设置透明背景、创建渐变、应用盒子阴影以及实现文字特效。同时，提到了前端兼容性自查工具Caniuse的重要性。

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

-前端兼容性自查工具 caniuse

简单放大效果

<!DOCTYPE html>
<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>
</head>
<style>
    body{
     
        text-align: center;
        margin-top: 200px;
    }
    img{
     
        width: 200px;
        height: 200px;
        border-radius: 50%;
        
        -webkit-transition: all 0.5s;//兼容不同浏览器的不同前缀
        -o-transition: all 0.5s; //持续时间 0.5s
        
        cursor: pointer;//手
    }
    img:hover{
     
        transform: scale(1.1); //放大1.1倍
    }
</style>
<body>
    <img src="./../123.jpg" alt="">
</body>
</html>

在这里插入图片描述

伪类

伪类选择器

不存在html中但是能选中改变样式

动态伪类选择器
1. :link
2. :visited
3. :hover
4. :active

状态选择器

<style type='text/css'>

	input:enabled{
     // input框可用时
	}
	input:disabled{
     // input框禁用时
	}
	radio:disabled{
     
	}
	...
</style>

结构伪类选择器

<style type='text/css'>

	li:first-child{
      //选择第一个子元素
	}
	li:last-child{
     //选择最后一个子元素
	}

	li:nth-child（）{
     //选择一个或多个特定的子元素 
					()内填2n -> 偶数个  ()内填2n+1 或odd  奇数个					
	}
	li:nth-last-child(){
     //基本同上，但是是从最后一个子元素开始算
	}

	li:nth-of-type(){
     //限type 
	}
	li:nth-last-of-type(){
     //限type  从最后一个子元素算
	}
	li:first-of-type{
     //限type 的第一个子元素
	}
	li:last-of-type{
     // type 的最后一个子元素
	}

	li:only-child{
     //选择父元素的唯一一个子元素
	}
	li:only-of-type{
      //选择父元素的唯一一个子元素 限type
	}
	...
	
</style>

伪元素

  css伪元素用于向某些选择器设置特殊效果

:first-letter 将特殊的样式添加到文本的首字母
:first-line 将特殊的样子添加到文本首行
:before 在某元素之前插入某些内容
:after 在某元素之后插入某些内容

border-radius 及实操

 border-radius: 20px 30px 40px 50px //左上，右上，右下，左下
 border-top-left-radius:20%  //左上角圆角 
 border-top-left-radius:60px 100px //圆角 x轴 y轴 不一样

画一个半圆

在这里插入图片描述

<!DOCTYPE html>
<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>
</head>
<style>
    body{
     
        text-align: center;
        margin-top: 200px;
    }
    .demo{
     
        width: 100px;
        height: 200px;
        margin: 0 auto;
        background-color: #F66;
        border: 1px solid #ccc;
        border-radius:100px 0 0  100px ;
    }
</style>
<body>
  <div class="demo"></div>
</body>
</html>

css3画三角形

在这里插入图片描述

<!DOCTYPE html>
<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>画三角形</title>
    <style>
        .demo{
   
            margin: 0 auto;
            width: 0px;
            height: 0px;

            border-top: 50px solid transparent;
            border-left:50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid gray;
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

css画菱形

在这里插入图片描述

在这里插入代码片
<!DOCTYPE html>
<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>菱形</title>
    <style>
        .demo{
   
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: gray;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            //平行四边形
           //-webkit-transform: skew(45deg,20deg);
            //-moz-transform: skew(45deg,20deg);
            //-ms-transform: skew(45deg,20deg);
            //-o-transform: skew(45deg,20deg);
            //transform: skew(45deg,20deg);
        }
    </style>
</head>
<body>   
    <div class="demo"></div>
</body>
</html>

css画五角星/六角星

在这里插入图片描述

<!DOCTYPE html>
<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>五角星</title>
    <style>
        .demo{
   
            margin:  150px auto;
            width: 0px;
            height: 0px;
            border-bottom:70px solid red ;
            border-left:100px solid transparent ;
            border-right:100px solid transparent ;
            -webkit-transform: rotate(35deg);
            -ms-transform: rotate(35deg);
            -o-transform: rotate(35deg);
            transform: rotate(35deg);
            position: relative;
           
        }
        .demo::before{
   
            content: '';
            width: 0px;
            height: 0px;
            border-bottom:70px solid red ;
            border-left:30px solid transparent ;
            border-right:30px solid transparent ;
            -webkit-transform: rotate(-35deg);
            -ms-transform: rotate(-35deg);
            -o-transform: rotate(-35deg);
            transform: rotate(-35deg);
            position:absolute;
            top: -45px;
            left: -65px;
         }