css3新增属性

最新推荐文章于 2023-03-22 14:02:48 发布

倚窗听梦~~~

最新推荐文章于 2023-03-22 14:02:48 发布

阅读量519

点赞数

本文链接：https://blog.csdn.net/weixin_45343884/article/details/101021518

版权

一·pointer-events指针事件属性

相关特性：
①阻止用户的点击动作产生任何效果
②阻止缺省即电脑默认状态，鼠标指针的显示
③阻止CSS里的hover和active状态的变化触发事件
④阻止JavaScript点击动作触发的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>6pointer-events</title>
		<style>
			a[href="outline.html"]{
				pointer-events:none;/*无法被点击，而且没有鼠标手形样式。*/
			}
			.box1{
				width: 100%;
				height: 50px;
				background: rgba(0,0,0,0.2);
				position: fixed;
				top: 0;left: 0;
				pointer-events:none;
			}
		</style>
	</head>
	<body>
		<a href="box-shadow overflow.html">穿过box1层来点击a标签了</a>
		<a href="outline.html">无法被点击，而且没有鼠标手形样式</a>
		<div class="box1"></div>
	</body>
</html>

在这里插入图片描述

二·user-select用户选中属性

注意：使用时需要添加各种浏览器引擎前缀
在这里插入图片描述
eg:

<div class="div">
		<p>我是谁</p>
		<p>你是谁的白衣少年</p>
		<p>呀呀呀</p>
		<img src="img/55.jpg"/>
</div>

在这里插入图片描述

（1）none：禁止用户选中，此时无法选中任意页面元素

-webkit-user-select:none;/*禁止用户选中*/

（2）text：对用户的选择没有限制，此时可以选中任意元素

-webkit-user-select:text;

（3）all：目标元素将整体被选中，也就是说不能只选中一部分，在你用鼠标选中部分文字时，浏览器会自动选中整个元素里的内容。

-webkit-user-select:all;

三·filter滤镜属性

涉及效果：
模糊滤镜、亮度、对比度、投影、灰度、色相旋转、反转图像、透明度、饱和度等等。
原图：
在这里插入图片描述

（1）filter模糊滤镜blur(Npx)

	img{
		filter: blur(0);
		transition: all 3s;
	}
	img:hover{
		filter: blur(10px);
	}

在这里插入图片描述

（2）filter亮度brightness(%)

----使图片更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。值超过100%，图像会比原来更亮。如果没有设定值，默认是1。可以使用百分比也可以使用小数表示。

		img{
			filter: brightness(100%);
			transition: all 3s;
		}
		img:hover{
			filter: brightness(200%);
		}

在这里插入图片描述

（3）filter对比度contrast(%)

----调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值超过100%，意味着会运用更低的对比。若没有设置值，默认是1。可以使用百分比也可以使用小数表示。

		img{
			filter: contrast(100%);
			transition: all 3s;
		}
		img:hover{
			filter: contrast(200%);
		}

在这里插入图片描述

（4）filter投影drop-shadow

	img:hover{
		filter:drop-shadow(10px 10px 4px rgba(0,0,0,0.5));
	}

在这里插入图片描述

（5）filter灰度 grayscale(%)

-----将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。若未设置，值默认是0。也可以写0-1之间的小数。

			img{
				filter: grayscale(0);
				transition: all 3s;
			}
			img:hover{
				filter:grayscale(1);
			}

在这里插入图片描述

（6）filter色相旋转hue-rotate(deg)

-----给图像应用色相旋转。让图像中的颜色，在色相环中做对应的旋转。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

			img:hover{
				filter:hue-rotate(360deg);
			}

色相环

（7）filter反转图像invert(%)

----反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0。

         	img{
				filter: invert(0%);
				transition: all 3s;
			}
			img:hover{
				filter:invert(100%);
			}

在这里插入图片描述

（8）filter图像透明度opacity(%)

-----图像的透明程度。值为0%则是完全透明，值为100%则图像无变化。0-100%之间则是部分透明。也可以用0-1之间的小数替代%。与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

			img:hover{
				filter:opacity(0.6);
			}

在这里插入图片描述

（9）filter饱和度saturate(%)

----值为0%则是完全不饱和，值为100%则图像无变化。大于100%，则饱和度增高，色彩就会变重。

			img{
				filter: saturate(100%);
				transition: all 3s;
			}
			img:hover{
				filter:saturate(150%);
			}

在这里插入图片描述

★★★★★小结：
———以上各个滤镜效果可以结合使用，注意: 顺序是非常重要的，如果顺序变了，最后的效果也会发生变化★

倚窗听梦~~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3新增属性

一·pointer-events指针事件属性相关特性：①阻止用户的点击动作产生任何效果②阻止缺省即电脑默认状态，鼠标指针的显示③阻止CSS里的hover和active状态的变化触发事件④阻止JavaScript点击动作触发的事件<!DOCTYPE html><html> <head> <meta charset="UTF-8">...
复制链接

扫一扫