css3有哪些新增属性,CSS3新增属性
本篇文章为大家介绍一些CSS3新增的属性,CSS3新属性的出现弥补了CSS2版本的不足,解决了很多我们设置元素样式时的痛点。
1.文本阴影属性
text-shadow:水平距离 垂直距离 模糊半径(模糊程度) 阴影颜色
说明:阴影水平距离设置为正数时向右移动,负数时向左移动、阴影垂直距离设置为正数时向下移动,负数时向上移动
注意:模糊半径不能写负数,可以写多个文本阴影需要用逗号分隔
2.盒子阴影
box-shadow : 水平距离(必填,可为负值) 垂直距离(必填,可为负值) 模糊距离 阴影大小 阴影颜色 阴影位置(内侧或外侧)
举例:box-shadow: 10px 10px 8px 10px #999 inset;
3.文本换行
word-wrap 此属性来设置是否允许浏览器在单词内断句,解决一个字符串太长浏览器找不到自然断点而文本溢出的问题。
属性值:nomal 只在允许的断字点换行(浏览器默认属性) break-word 允许长单词或者长URL地址换行到下一行。
word-break
属性值:break-all 断句方式非常粗暴,不是将长单词挪到下一行而是单词内直接断句。 keep-all 文本不会换行只能在半角空格或连字符处换行。
4.背景属性
background-origin 背景图片原点(背景图片的起始点)
说明:指定background-origin属性应该是相对位置
属性值
padding-box 背景图片相对于padding作为显示起点 默认值
border-box 背景图片相对于border作为显示起点
content-box 背景图片相对于内容作为显示起点。
background-clip 背景裁切(背景显示区域)
说明:background-clip 属性规定背景的显示区域。
属性值
padding-box 背景被裁剪到内边距框。默认值
border-box 背景被裁剪到边框盒。
content-box 背景被裁剪到内容框。
注:背景是包含背景图片与背景颜色
background-size 背景图片尺寸
说明:background-size 规定背景图像的尺寸
属性值
像素为单位 (10px)
规定背景图的大小。第一个值宽度,第二个值高度。
百分比为单位(%)
以百分比(相对容器计算百分比)为值设置背景图大小,第一个值宽度,第二个值高度。
cover
把背景图片扩展至足够大,以使背景图像完全覆盖背景区域,背景图片部分会被裁切。
contain
当背景图片的宽高有一个方向触碰到元素的宽或者高的情况下,背景图片停止缩放。
backface-visibility:hidden,背景背面设置属性。
多背景图的设置
Element:background:url(),url() ; 多张背景图片引用,背景颜色只能加给最后的一次引用。background-size设置会统一多张背景图片大小。
5.透明度设置
opacity:0-1之间,0是透明,1是不透明。注:给当前元素添加opacity会影响元素里内容(文本、图片、子元素)的透明度。IE9以下不支持opacity。
rgba(r,g,b,a)a的取值是0-1之间,0是透明,1是不透明,给元素添加rgba不会影响元素里内容(文本、图片、子元素)的透明度。IE9以下不支持。
filter:alpha(opacity=1-100)1是透明,100是不透名,IE浏览器专用。
6.图片边框
可以将图片设置为元素的边框
border-image(必须给当前元素添加border属性才能使用border-image,border属性写在border-image前边。) 属性是一个简写属性,用于设置以下属性:
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移(不加单位)。第一个值代表表左右边框,第二个值代表上下边框。
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。第一个值代表上下边框,第二个代表左右边框。
border-image-outset 边框图像区域超出边框的量(值是一个倍数,不可以简写border-image)。
border-image-width 图片边框宽度(不可以简写border-image)。一个值四个方向,border-image-width:上下 左右
7.CSS圆角属性
border-radius:一个值代表四个方向,上右下左
border-radius:左上/右下 右上/左下
border-radius:左上 右上/左下 右下
border-radius:左上 右上 右下 左下
圆角大小的原理:border-radius:5px;
常用的技巧:border-radius:50%; 将正方形块元素转换为圆形。
8.pointer-events
阻止用户的点击动作产生任何效果
阻止缺省鼠标指针的显示
阻止CSS里的 hover 和 active 状态的变化触发事件
阻止JavaScript点击动作触发的事件
提交页面,提交按钮点击后,添加这个样式属性(style=“pointer-events”),来防止重复提交。
一些层的绝对定位,覆盖按钮,穿透可以点击它。
9.calc方法
calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。
calc()能做什么?
calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。
calc()语法
calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:
.elm {
width: calc(expression);
}
其中"expression"是一个表达式,用来计算长度的表达式。
calc()的运算规则
calc()使用通用的数学运算规则,但是也提供更智能的功能:
使用“+”、“-”、“*” 和 “/”四则运算;
可以使用百分比、px、em、rem等单位;
可以混合使用各种单位进行计算;
表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
浏览器的兼容性
浏览器对calc()的兼容性还算不错,在IE9、FF4.0+、Chrome19+、Safari6+都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其他的全军覆没。
大家在实际使用时,同样需要添加浏览器的前缀
.elm {
/Firefox/
-moz-calc(expression);
/chrome safari/
-webkit-calc(expression);
/*Standard */
calc();
}
css3有哪些新增属性,CSS3新增属性相关推荐
- html5中css新增的属性,css3有哪些新增属性?常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
- html 给照片添加圆角属性,CSS3新增属性(背景图、边框背景、圆角)
1.Background-size 背景尺寸 说明:background-size 规定背景图像的尺寸 属性值 length (10px) 规定背景图的大小.第一个值宽度,第二个值高度.(直接定义背景 ...
- audio标签的controls属性_HTML5 新增标签和属性
哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! 志同道合的小伙伴跟我一起学习交流哦! 第一阶段 HT ...
- HTML5新属性+CSS3动画
HTML5 一.什么是HTML5 1.1 HTML5 的概念与定义 定义: HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新 ...
- H5新增、CSS3以及ES5、ES6新增特性
1.H5新增 新增特性:语义化标签.音视频处理API.canvas.拖拽释放API.history API.地理位置API.webSocket.web存储的localStorage和SessionSt ...
- H5新增的标签和属性
声明 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML ...
- html中的变圆的属性,CSS3属性之圆角效果——border-radius属性
在css3之前,要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里:http://www.hicss.net/css-practise-of-image-round-box/).实现 ...
- html的过渡属性,CSS3 transition 过渡属性
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果.通过过渡transition属性,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果,要实现这一点,必须实现一项内容, ...
- HTML5新增的拖拽属性draggable,怎么实现拖拽?
draggable定义和用法: 1.draggable 属性规定元素是否可拖动. 2.提示: 链接和图像默认是可拖动的. 3.提示: draggable 属性经常用于拖放操作. 注意:draggabl ...
- 谷粒商城项目篇6_分布式基础完结篇_商品服务模块(品牌管理、平台属性、新增商品)、仓储服务模块(仓库管理)
目录 商品服务模块 品牌管理 品牌对应三级目录的增删改查 平台属性 数据库表关系 规格参数 增删改查 销售属性 属性分组 新增商品 获取三级分类及品牌 商品json存储格式 数据库表设计 商品服务调用 ...
最新文章
- 工信部 学习类app_工信部整治APP侵权行为,私自收集个人信息等8类问题被点名...
- [洛谷P4735]最大异或和
- Post方式之百度翻译的爬取
- asp.net 4.0 新特性(翻译)
- 项目管理(3):备战pmp
- 终端服务器安全层在协议流中检测到错误,终端服务器安全层在协议流中检测到错误,并已取消客户端连接...
- android 外部内容分享到app内,外部跳转APP
- 《刺激战场》正式停服!换了个马甲又来了 开启收费变现模式?
- 组合数学及其应用——polya计数
- 数据结构和算法———P2 算法概述
- 【解决】缺少libstdc++.so.6库的原因及解决的方法
- 2022爱分析· 地产科技厂商全景报告
- javascript常用正则
- JAVAEE工程师-2年经验-个人简历
- Deepin深度操作系统安装 索尼Eye Toy摄像头,教程
- win10 C盘磁盘清理
- 电脑分辨率怎么调?教你调整电脑屏幕分辨率
- overload方法重载
- Android系统开机画面修改
- 微信小程序开发坑背景图之微博图床