CSS3新增的属性有哪些:
CSS 用于控制网页的样式和布局。
CSS3 是最新的 CSS 标准。
CSS3新增了很多的属性,下面一起来分析一下新增的一些属性:
1.CSS3边框:
- border-radius:CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,border-radius 属性用于创建圆角。border:2px solid;
- box-shadow:CSS3边框阴影。在 CSS3 中,box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;
- border-image:CSS3边框图片。通过 CSS3 的 border-image 属性,您可以使用图片来创建边框。border-image:url(border.png) 30 30 round;
2.CSS3背景:
- background-size: 属性规定背景图片的尺寸。在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
- background-origin :属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。
3.CSS3文字效果:
- text-shadow:在 CSS3 中,text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;
- word-wrap :单词太长的话就可能无法超出某个区域,允许对长单词进行拆分,并换行到下一行:p{word-wrap:break-word;}
4.CSS3 2D转换:
transform:通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
- translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:transform:translate(50px,100px);值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
- rotate():元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。
- scale():元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
- skew():元素转动给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素转动 30 度,围绕 Y 轴转动 20 度。
- matrix() :
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
5.CSS3 3D转换:
- rotateX():元素围绕其 X 轴以给定的度数进行旋转。transform:rotateX(120deg);
- rotateY():元素围绕其 Y 轴以给定的度数进行旋转。transform:rotateY(120deg);
6.CSS3 过渡:当元素从一种样式变换为另一种样式时为元素添加效果。
7.CSS3动画:通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
8.CSS3多列:
- column-count:属性规定元素应该被分隔的列数。
- column-gap:属性规定列之间的间隔。
- column-rule :属性设置列之间的宽度、样式和颜色规则。
9.CSS3用户界面:
- resize:属性规定是否可由用户调整元素尺寸。
- box-sizing:属性允许您以确切的方式定义适应某个区域的具体内容。
- outline-offset :属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
以上呢,就是我对CSS3新增的一些属性的了解,希望对学习的大家有所帮助。
CSS3新增的属性有哪些:的更多相关文章
- CSS3新增文本属性实现图片点击切换效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3新增的属性有哪些
徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...
- css3新增的属性 - 分享
CSS3新增属性 一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...
- css3新增文本属性
css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...
- CSS3新增基础属性总结——20160409(易达客)
1.box-shadow :h-shadow v-shadow blur spread color inset(outset) h-shadow:必须:水平阴影位置,允许负值. v-shadow:必须 ...
- Css3 新增的属性以及使用
Css3基础操作 . Css3? css3事css的最新版本 width. heith.background.border**都是属于css2.1CSS3会保留之前 CSS2.1的内容,只是添加了一些 ...
- css3新增的属性选择器
使用css选择器,可以实现一个样式对应多个html文档的元素,在{}前面的部分就是"选择器",指明了样式的作用对象. 在CSS中追加了三个属性选择器:[att*=val].[att ...
- css3新增的属性
由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀, 如:-moz- firefox火狐 -ms- IE ...
- Css3新增背景属性
1.background-origin 背景的起始位置 background-origin: border-box || padding-box || content-box; 案例初始化: 代码: ...
随机推荐
- 分享一个正则对html标签的替换
replace_html(parm){ let self = this; return self.trim(parm.replace(new RegExp("<[^<]*> ...
- JQ UI dialog
初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话 ...
- ivew Modal rule校验冲突问题
问题描述:新建和编辑公用的是一个弹框,打开新建关闭之后,会影响到编辑的弹框. 解决方法:赋值前先重置一下表单 this.$refs["你的表单"].resetFields();
- 如何解决zabbix中自定义监控mysql因密码造成的 Warning
1.--show-warnings=false 在指定mysql命令获取参数时,指定不获取 Warning.不过亲测这个方法不是很有效 例如: mysql -uroot -p123 --show-wa ...
- Hadoop2.9.1安装教程_环境Ubuntu_VMware安装
一,环境选择 Hadoop需要运行在linux系统之下,所以有以下两种选择:1,安装双系统,缺点:此方式比较麻烦而且并不适合初学者,因为之后的安装以及配置过程可能会遇到许多问题,这需要我们上网去搜索. ...
- v4l2程序实例
#include <stdio.h> #include <string.h> #include <errno.h> #include <stdlib.h> ...
- .conf、.bak是什么格式
1..conf 是config的简写,也就是配置文件,多用于存取硬件驱动程序的安装配置信息.内容一般是一些硬件的版本号呀,支持什么样的系统等信息.本质上来说就是TXT文件,里面的格式没有统一标准,各个 ...
- java中BufferedReader 有什么用
这个类就是一个包装类,它可以包装字符流,将字符流放入缓存里,先把字符读到缓存里,到缓存满了或者你flush的时候,再读入内存,就是为了提供读的效率而设计的. BufferedReader buffer ...
- Collection、List、Set、Map之间的关系
初学java,单个的接触有点迷糊,所以总结下他们的关系 一.关系 Collection --List:以特定顺序存储 --ArrayList.LinkList.Vector --Set:不能包含重复的 ...
- Nginx +Tomcat 实现动静态分离(转)
Nginx +Tomcat 实现动静态分离 动静态分离就是Nginx处理客户端的请求的静态页面(html页面)或者图片,Tomcat处理客户端请求的动态页面(jsp页面),因为Nginx处理的静态页面 ...