CSS3--其他新增属性
关键词：box-shadow、overflow-x、overflow-y、min-width、min-height、max-width、max-height、zoom、pointer-events、user-select、content、filter: blur();
box-shadow属性
语法：box-shadow: none|inset x-offset y-offset blur-radius spread-radius color；
overflow属性
overflow类属性：overflow、overflow-x、overflow-y
作用：这类属性用于定义溢出元素内容区的内容会如何处理。
min-*/max-*宽高限定属性
宽高限定类属性：min-width、min-height、max-width、max-height
含义：
- min-width为最小宽度，max-width为最大宽度
- min-height为最小高度，max-height为最大高度
zoom属性
IE私有属性zoom简介：
zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。
- zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置
- 执行的渲染顺序也不同，zoom可能影响到盒子的计算
- zoom可以触发ie的haslayout属性，解决IE下的多个bug，清除浮动，清除margin重叠等
- zoom在非IE浏览器中表现为支持放大或者缩小，但是一个不标准的css属性，因此一般在非IE浏览器中不用zoom来缩放
zoom属性测试：
<div class="box box1"></div><div class="box box2"></div>
.box{width: 100px;height: 100px;margin: 20px auto;border: 1px solid;}.box1{zoom: 1;}.box2{zoom: 2;}
pointer-events属性
pointer-events指针事件属性，简介：
- 阻止用户的点击动作产生任何效果
- 阻止缺省即电脑默认状态，鼠标指针的显示
- 阻止CSS里的hover和active状态的变化触发事件
- 阻止JavaScript点击动作触发的事件
pointer-events指针事件属性兼容：
pointer-events指针事件属性案例：
<a href="https://www.baidu.com">百度</a><a href="https://www.sogou.com">搜狗</a>
a[href="https://www.sogou.com"]{pointer-events: none;}
验证后发现第二个a标签不仅无法被点击，而且没有鼠标手形样式。
pointer-events指针事件属性作用：
这个属性非常的实用，在许多网站上过节的时候，页面最上层会用canvas绘制的雨、雪花等。
为了避免这些悬浮物遮挡住页面从而影响鼠标点击，可以使用pointer-events=none属性，让这些上方的canvas不会遮挡鼠标事件，让鼠标事件可以穿透上方的canvas来点击页面。
分享几个canvas画布制作的网上案例:
• 可视化音频：http://demo.lanrenzhijia.com/demo/62/6294/demo/
• 雪花：http://demo.lanrenzhijia.com/demo/77/7747/demo/
• 彩色气泡：http://demo.lanrenzhijia.com/demo/79/7965/demo/
• 烟雾消散：http://demo.lanrenzhijia.com/demo/91/9193/demo/
• 赛车游戏：http://demo.lanrenzhijia.com/demo/51/5198/demo/
user-select用户选中属性
user-select用户选中属性简介：
user-select属性用来禁止用户用鼠标在页面上选中文字、图片等，也就是，让页面内容不可选。也可以只允许用户选中文字，或者全部都放开，用户可以同时选中文字、还包括文本里的图片、视频等其它东西。user-select属性的作用是元素级别的，它不仅可以作用整个页面，也可以只在指定的元素和其子元素上生效。
注意：使用时需要添加各种浏览器引擎前缀
user-select用户选中属性语法：
注意：有的浏览器不支持个别属性，即兼容有所区别
/*默认写法*/p{user-select: none;/*禁止用户选中*/user-select: auto;/**/user-select: text;/*对用户的选择没有限制*/user-select: contain;/**/user-select: all;/*目标元素将整体被选中，也就是说不能只选中一部分，在你用鼠标选中部分文字时浏览器会自动选中整个元素里的内容*/}/*谷歌浏览器写法*/p{-webkit-user-select: none;-webkit-user-select: text;-webkit-user-select: all;}/*火狐浏览器写法*/p{-moz-user-select: none;-moz-user-select: text;-moz-user-select: all;}/*IE写法*/p{-ms-user-select: none;-ms-user-select: text;-ms-user-select: all;-ms-user-select: element;}
filter滤镜属性
filter滤镜属性简介：
filter滤镜属性时CSS3中的一个属性，但IE不支持（IE有它专属的滤镜方式）。有兴趣的可以在网上找到与CSS3 filter对应的IE滤镜方式，本节针对IE滤镜不做过多介绍。
涉及效果：
模糊滤镜、亮度、对比度、投影、灰度、色相旋转、反转图像、透明度、饱和度等等。
1. filter模糊滤镜blur(Npx)
给图像设置高斯模糊。值越大越模糊，默认是0，就是不模糊；可以接受css长度单位，不接受百分比
blur模糊的缺点是边缘也会模糊不清。不过，在实际的应用中，会给图像添加一个box，超出范围隐藏。
img{filter: blur(6px);}img:hover{filter: blur(0px);}
2. filter亮度brightness(%)
使图片更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。值超过100%，图像会比原来更亮。如果没有设定值，默认是1。可以使用百分比也可以使用小数表示。
注意：写brightness(2) 与brightness(200%) 效果一样
img{filter: brightness(2);}img:hover{filter: brightness(1);}
3. filter对比度contrast(%)
调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值超过100%，意味着会运用更低的对比。若没有设置值，默认是1。可以使用百分比也可以使用小数表示。
img{filter: contrast(6);}img:hover{filter: contrast(1);}
4. filter投影drop-shadow
投影drop-shadow(x偏移 y偏移 模糊范围 颜色)，与 box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。
img{filter: all 0.6s;}img:hover{filter: drop-shadow(10px 10px 3px rgba(0,0,0,0.3));}
5. filter灰度 grayscale(%)
将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。若未设置，值默认是0。也可以写0-1之间的小数。
6. filter色相旋转hue-rotate(deg)
给图像应用色相旋转。让图像中的颜色，在色相环中做对应的旋转。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
色相环如下所示：
7. filter反转图像invert(%)
反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。
img{transition: all 1s;}img:hover{filter: inherit(100%);}
8. filter图像透明度opacity(%)
图像的透明程度。值为0%则是完全透明，值为100%则图像无变化。0-100%之间则是部分透明。也可以用0-1之间的小数替代%。与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
img{transition: all 1s;}img:hover{filter: opacity(0.5);}
8. filter饱和度saturate(%)
值为0%则是完全不饱和，值为100%则图像无变化。大于100%，则饱和度增高，色彩就会变重。
img{transition: all 1s;}img:hover{filter: saturate(200%);}
小结：
（1）以上各个滤镜效果可以结合使用，注意: 顺序是非常重要的，如果顺序变了，最后的效果也会发生变化
（2）应用场景：鼠标悬停时图标的高亮与灰化
练习 ：
鼠标悬停时图标的高亮与灰化，图片可以换为其他图片
CSS3--其他新增属性相关推荐
- 关于——css3新增属性有哪些？css3中新增属性（部分总结）
css3中新增属性(部分总结) 一.css3新增边框属性 border-color:为边框设置多种颜色 border-image:属性是使用图片来创建边框 border-radius:圆角边框 box ...
- 简单说下我对H5的新增的标签和css3的新增属性
HTML 英文全称是:HyperText Markup language: 中文全称是超文本标记语言又称超链接文本标记语言: H5呢就是HTML第五代版本: 首先智能表单 <form act ...
- css中哪些属性与创建多列相关,css3中的新增属性有哪些
css3中的新增属性有哪些 发布时间:2021-04-02 17:39:08 来源:亿速云 阅读:90 作者:Leah 这篇文章将为大家详细讲解有关css3中的新增属性有哪些,文章内容质量较高,因此小 ...
- CSS3新增-属性（长度颜色背景）选择器-盒子模型
属性(长度颜色背景)选择器-盒子模型 1 CSS3 基本语法 1.1 CSS3 浏览器私有前缀 Chorme: -webkit- Safari: -webkit- IE; -ms- Firefox: ...
- CSS3新增属性之圆角、盒阴影、字阴影
CSS3新增属性之圆角.盒阴影.字阴影 人生没有白走的路,每一步都算数. 一.圆角 border-radius:; 取值px % border-radius: 50%; 画一个圆 二.盒阴影 box- ...
- html5中css新增的属性,css3有哪些新增属性？常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
- 前端基础（13）：CSS3新增属性和选择器
学习目标 1.CSS3的概念.优势及应用 2.渐进增强和优雅降级的简介 3.CSS3部分新增选择器的语法及应用 4.CSS3的新增属性语法及应用 一.CSS3的概念.优势及应用 CSS3是css技术的 ...
- CSS3新增属性汇总
伪类选择器 伪类选择器就是专门用于修改a标签不同状态样式的 a标签有哪些状态 默认状态, 从未被点击过 :link 被访问过状态 :visited 长按状态 :active 鼠标悬浮状态 :hover ...
- 详解CSS3中新增的内容属性：content
详解CSS3中新增的内容属性:content 1. 用法: content属性用于插入生成的内容,常和:before选择器和:after选择器配合使用,将生成的内容放在一个元素内容的前面或后面. 2. ...
- HTML5培训课件：CSS3新增属性拿走不谢
CSS3 背景的新增属性 1.Background-origin 背景原点 说明:指定background-origin属性应该是相对位置属性值:padding-box 背景图像填充框的相对位置 bo ...
最新文章
- 解题报告：CF1307D Cow and Fields(最短路、最优解不等式化简)
- 单摄像头+深度学习实现伪激光雷达，代码已开源
- DW的代码格式化和净化功能
- 使用HOG+LBP实现动物分类：matlab版本
- nginx配置文件+本地测试请求转发到远程服务器+集群
- FortiGate 的相关知识
- oracle varchar2转date_5分钟学会精算师常用Oracle语句
- php100的阶乘代码while语句,编写PHP程序，使用while循环计算4096是2的几次方，然后输出结果...
- 推荐系统实战第一部分 协同过滤
- ORA-01033 ORACLE 正在初始化或关闭
- 智乃酱的区间乘积（前缀积+逆元）
- 加密日记 android,Lifeograph加密日记应用程序
- 考勤系统与服务器链接,考勤机怎么连接服务器
- （快速下载）百度 apollo 开源代码
- 团队建设(Team building)就是等于组织大家一起吃饭娱乐吗？
- Pollard-Rho算法模板（POJ 1811 Prime Test）
- 入职腾讯第九年，我辞职了
- 5.深度解密五：网站被百度搜索引擎降权的原因及百度算法汇总
- 农村中学扩建工程全套CAD施工图哪里找？
- iPhoneX炫彩壁纸背景demo（含动效）