多重阴影的设置、鼠标激活时、相邻选择器的简介、display

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/109403526

一、多重阴影的设置：

.box:hover
         {
            /* 多重阴影的设置 */
            /* 外阴影      内阴影   中间用逗号隔开（它们之间没有前后顺序，根据自己的喜好，外阴影和阴影谁在前面都无所谓） */
            示例展示：
            box-shadow: 0px 10px 10px rgba(0,0,0,0.5),0px 0px 20px rgba(0,0,0,0.5) inset; }

二、鼠标激活时：

.box:active{ }

 /* 鼠标激活时（即为：鼠标按下不抬起时） */
  .box:active
{
   示例：
  /* 外阴影取消  内阴影保留 */
   box-shadow: 0px 0px 0px rgba(0,0,0,0.5),0px 0px 20px rgba(0,0,0,0.5) inset;
    
  margin-top:110px;
   }

三、相邻选择器：

      /* 元素：checked{}
        当元素处于选中状态时 */
        /* a+b结构上紧跟在a之后的b（只能是后面的一个b起到作用，其余的不管用） */
        /* 借助元素的选中和非选中状态，改变label的样式 */
        /* 默认lable的样式 */
        .bg{
            background-color:red;

        }
         /* 当.fxk处于选中状态时，紧跟在它后面的.bg */
        .fxk:checked+.bg{
            background-color:yellow;
        }

示例展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 元素：checked{}
        当元素处于选中状态时 */
        /* a+b结构上紧跟在a之后的b */
        /* 借助元素的选中和非选中状态，改变label的样式 */
        /* 默认lable的样式 */
        .bg{
            background-color:red;
        }
         /* 当.fxk处于选中状态时，紧跟在它后面的.bg */
        .fxk:checked+.bg{
            background-color:yellow;
        }
    </style>
</head>
<body>
    <!-- 复选框 -->
    <input type="checkbox" id="c"  class="fxk">
    <!-- 本身：为表单元素添加标注 -->
    <lable for="c" class="bg">1111</lable>
    <!-- label的for属性的值，为指定的input的id名称---for="id名"
     达到绑定两个元素的目的
     产生结果：点击了label就像点击了input一样
    -->
</body>
</html>

四、display

/* 显示为块（用来让原本不支持宽和高的元素变为支持宽和高） */
label(此标签默认不支持宽和高，如果要让它支持，则需要将其转化即display:block;)
display: block;
 /* 隐藏元素 */
display: none;

示例展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .kaiguan{
            /* 宽度 */
            width:245px;
            /* 高度 */
            height:81px;
            
        }
        /* 选择.kaiguan 里面的label */
        .kaiguan label{
            /* 显示为块 */
            display: block;

            width:245px;
            /* 高度 */
            height:81px;
            /* 背景图片 */
            background-image:url("6.jpg");
            /* 背景图片不重复 */
            background-repeat:no-repeat;
            /* 背景图片的位置 */
            background-position:0 0;
            /* 圆角的裁剪 */
            border-radius: 41px;
             
            /* 过渡 */
            transition:0.5s;
            cursor:pointer;

        }
        /* .kaiguan里面的input处于选中状态时，紧跟在它后面的label */
        .kaiguan input:checked+label{
            background-position:-163px  0px;
        }
        .kaiguan input{
            /* 隐藏元素 */
            display: none;
        }
        </style>    
</head>
<body>
     <div class="kaiguan">
         <!-- 借助它的状态 -->
         <input type="checkbox" id="fxk">
         <!-- 用它来控制样式----默认支持宽高 -->
         <!--label默认不支持宽和高  -->
         <!-- 可以通过display显示块 -->
         <label for="fxk"></label>
    </div>
    </div>
</body>
</html>