css3 的一些新属性

转载 2016年08月30日 16:01:17

1.边框新属性 border-radius border-shadow border-image
2.背景新属性 background-size background-origin –规定背景图片的定位区域
3.文本效果 text-shadow(文本阴影) word-warp(强制换行)
4.字体 @font-face
5.2D转换 transform
transform: rotate(30deg); 旋转
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: translate(50px,100px); 移动
transform: rotate(30deg); 旋转
transform: scale(2,4); 缩放
6.3D转换 transform: rotateX(120deg);
7.css过渡 transition: width 2s;
8.动画 @keyframes animation:myfirst 5s; @keyframes myfirst{from {background: red;}to{background: yellow;}}
9.多列 column-count 属性规定元素应该被分隔的列数:
column-gap 属性规定列之间的间隔:
column-rule 属性设置列之间的宽度、样式和颜色规则。
10.用户界面 resize 属性规定是否可由用户调整元素尺寸。
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

相关文章推荐

CSS3新属性之user-select控制文本是否选中

1、抛砖:开发中遇到一个很奇怪的问题,点击网页的某地方,其他地方出现文本选中的情况,导致十分难看。如下图(点击网页其他地方search搜索出现选中状态) 2、通过user-select解决: 语法...

CSS3中动画效果新属性----transition&transform

W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,...

CSS3中背景的四个新的属性

本文对CSS3中背景的四个新的属性进行了详细介绍。 多重背景图片 Css3中,对一个元素可以使用一张以上的背景图片。除了使用逗号将图片分开以外,其代码与css2相同。第一个声明的图片定位在...
  • judyge
  • judyge
  • 2016年07月08日 10:32
  • 283

解锁css3新姿势之transform3D各属性及transform兼容之矩阵写法

闲来无事,整理一下可以打造炫酷网站的一些transform的属性 1. 矩阵transform:matrix() 这个矩阵哥们是有些厉害的,不得不多说两句,这哥们可以同时写上缩放,旋转,...

IE浏览器兼容CSS3新属性border-radius

使用PIE对IE进行CSS3兼容介绍及渲染 重要功能实现:   可以使 IE6、7、8 、9 实现类似 chrome 和 firefox  1.  更自然逼真的阴影效果,不再是以前那种丑陋的滤镜效...

使用 CSS3 新属性 user-select 控制网页内容的选择范围

IE10平台预览第四版中包含了对 CSS3 新属性 -ms-user-select 的支持,Web 开发人员可以利用这一新属性轻松精确的控制用户可以在网站上选择哪些文本。以较为典型的新闻网站为例,大多...

css3新属性汇总

1边框、文本效果、字体 border-radius 圆角 box-shadow 元素阴影 4个值 box-shadow:10px 20px 5px blue; text-shadow:10px ...

CSS3新属性

1.transition 过渡效果 让一个元素从一个状态过度到另一种状态。 transition: property time; transition: all 3s; transition:...

css3的Background新属性

前言CSS3中出现了几种关于背景图片的新属性:background-origin、background-clip、background-position等.之前大致了解了下,但是background-...

CSS3新属性box-flexd弹性盒模型

1、介绍:box-flex是css3属性,需考虑兼容性问题。(大部分浏览器已经实现了无前缀版本) #element{ box-flex:1.0;   /*必须是整数,占父元素几等分的意思*/ -moz...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3 的一些新属性
举报原因:
原因补充:

(最多只允许输入30个字)