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; 案例初始化: 代码: ...
随机推荐
- SQL Server 2014 中,新建登录用户,分配权限,并指定该用户的数据
一.运行环境 系统:Windows 10数据库:SQL Server 2014数据库名: APP 新建的用户名: app 二.操作步骤 1.打开 MS SQL Server Managemen ...
- Hacking PHP
0X01 SQL注入 这里主要是PHP的防范注入的几个配置,注入手法不再赘述 magic_quotes_gpc 对 $_GET $_POST $_COOKIE 变量中的 ' " \ 空字符( ...
- Unity "Build failed : Asset is marked as don't save " 解决方案
编译到Android时失败,是字体的原因: -- -- 摘自官方论坛排第二但点赞第一的回答. http://answers.unity3d.com/questions/363963/build-fai ...
- Qwiklab'实验-DynamoDB, Redshift, Elasticsearch'
title: AWS之Qwiklab subtitle: 4. Qwiklab'实验-Amazon DynamoDB, Amazon Redshift, Elasticsearch Service' ...
- Python中zip()与zip(*)的用法
目录 Python中zip()与zip(*)的用法 zip() 知识点来自leetcode最长公共前缀 Python中zip()与zip(*)的用法 可以看成是zip()为压缩,zip(*)是解压 z ...
- Vue文件封装日历组件
封装就是要具有灵活性,样式自适应,调用的时候传入props就可以变成自己想要的样式. 效果展示网址:https://1963331542.github.io/ 源代码: <template> ...
- vue 删除某个元素和删除某些元素
今天做项目使用前端vue框架,需要循环遍历去删除一些数组元素.开始思想局限,一直纠结如何去循环删除,犹豫循环删除数组值下标会发生变化,并不是一种好的方法. 方法一:使用forEach 和 splice ...
- web.xml中Filter过滤器标签说明
原文:http://www.cnblogs.com/edwardlauxh/archive/2010/03/11/1918618.html 在研究liferay框架中看到Web.xml中加入了过滤器的 ...
- HDU 4331 Contest 4
一个很直观的想法是,求出每个点上下左右能到达的最大长度.然后枚举其斜边...没想到过了.... 当然,题解有一个很巧妙的优化,利用树状数组,那个太巧妙了. #include<iostream&g ...
- IntelliJ IDEA启动spring boot项目出现Failed to start component [StandardEngine[Tomcat].StandardHost[localhost].TomcatEmbeddedContext[]]
IntelliJ IDEA启动spring boot项目出现Failed to start component [StandardEngine[Tomcat].StandardHost[localho ...