一、多重阴影的设置：

.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>

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

设置鼠标连接时触摸板禁用、Win10系统电脑触摸板使用方法总结
连接鼠标,禁用触摸板的设置: 连接鼠标时,容易不小心碰到触摸板,使光标移出或内容滑动,可以禁用触摸板:点击电脑左下角的"设置"->在搜索框内输入"触摸板" ...
如何设置鼠标移开后css,如何设置鼠标离开时由hover设置的样式不变？
1.用js添加延时处理 #div1{ height: 100px; width: 100px; background: #000000; position: relative; } #div2{ he ...
jquery鼠标移入文字提示_Jquery hover鼠标经过时弹出div动态提示语
一.效果图二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...
CSS实现鼠标悬浮时背景图片拉近且增加遮罩层效果
效果预览点击查看效果我们在浏览网站时会发现有一些图片在鼠标悬浮在上时会有放大拉近的效果. 想要实现这个效果有两种方法,第一种方法是控制背景图片,第二种方法是控制插入的图片,我们这里介绍第一 ...
C#设置按钮鼠标进入时半透明样式
C#设置按钮鼠标进入时半透明样式设置按钮的属性: FlatStyle = Flat: BorderSize = 0: BackColor = Transparent: 设置MouseEnter触发函 ...
echarts漏斗图鼠标移入时内部文字阴影/描边
问题当移入时,文字会有描边,且颜色为item不高亮时的颜色.想要去除. 解决属性鼠标移入时的属性在series中的label中的emphasis属性修改. 添加textBorderWidth和t ...
setEnabled():设置成true时，相当于激活了按钮，按钮的状态不再是死的，
2 package day01;//我声明了一个包叫做day01()public class HelloWorld {//声明类(房子)public static void main(String[] ...
el-table 设置斑马纹的效果，改变鼠标移入时和斑马纹的默认颜色
前提条件,引用了预处理,可以使用 /deep/ 或 ::v-deep ,没有使用预处理,使用 >>> html 部分 <template><el-table:dat ...
如何设置鼠标”的速度、滚动方向等配置？
小伙伴们在使用Mac系统(苹果电脑)的是时候,是否出现过鼠标灵敏度不高,用起来很是慢的感觉?其实呢这就是鼠标设置的问题啦,默认情况下,Mac上的滚动速度不是特别快,但是通过一些设置更改,您可以自定义O ...
怎么设置计算机访问需要密码图片,电脑桌面上有一个文件夹需要加密。就是设置成访问时输密码，怎么弄？...
电脑桌面上有一个文件夹需要加密.就是设置成访问时输密码,怎么弄?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 电脑桌面 ...

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

一、多重阴影的设置：

二、鼠标激活时：

三、相邻选择器：

四、display

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

最新文章

热门文章