CSS3笔记(一)
最开始的时候 CSS3产生的一个新属性是一个浏览器的私有的,然后W3C 可能会拿来采用做个标准,再没公布标准之前就只能用私有属性(加前缀)来表达各自厂商的实现,主要是CSS3刚出现那会儿,它暗示该CSS属性或规则尚未成为W3C标准的一部分,尽管现代浏览器已经支持了众多的CSS3属性,但CSS3目前还没得到全面的支持,所以我们需要使用一些特定的声明来提升兼容性,遗憾的是IE8及以下浏览器目前均不支持CSS3。
1.CSS3标准
为加强浏览器兼容性,在使用CSS3属性时尽量使用以下特定声明:
* Gecko(Mozilla/Firefox)浏览器的前缀: -moz-
* Webkit (Safari/Chrome)浏览器的前缀: -webkit-
例如边框圆角属性的写法:
.round {
border: 5px solid #ccc;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
}
2. RGBA颜色模式
在CSS3之前,在样式中指定的颜色值只能为RGB颜色值,并且只能通过opacity属性来设置元素的透明度。CSS3中增加RGBA颜色值,并且允许通过对RGBA颜色值设定alpha通道的方法来实现将半透明效果。透明度的取值范围在0到1之间,0是完全不透明,1是颜色完全透明。
说到透明度,不得不提opacity,也是用来设置透明度的,那它与RGBA的透明度又有什么区别呢?
1.opacity的透明度是指整个元素的透明度,且我们在父元素中使用了opacity,那么其后代元素都会受其影响。
2.使用alpha通道对元素设定透明度时,可以单独针对元素的背景色和文字颜色等来指定透明度,不会对后代产生影响。
3. 几个应该关注的CSS3“主流”的属性
1.圆角(border-radius)
圆角是最常见的视觉效果之一,按钮和背景边框使用圆角可以使元素变得生动。CSS3之前传统的修饰效果方式是使用图片,不仅影响加载速度而且不易维护,现在只需要设置圆角属性就可以了,核心只有简单的一句:border-radius:10px 10px 10px 10px,只要简单改动参数的值即可灵活改变圆角大小,稍加改动边长和半径可以变换出半圆,对角,四叶草等更多效果。
2.阴影(box-shadow)
最常见的视觉效果之一,可以使元素变得立体,常用于按钮,input输入框等处。
核心代码:box-shadow: 5px 5px 5px 0 #ccc;
前两个参数设置水平和垂直方向位移,第三个是阴影模糊距离,第四个阴影尺寸,阴影颜色,默认为外阴影,如果需要使用内阴影,则需要在背景颜色后面添加inset参数。
3.变形(transform)
目前transform 属性主要将元素应用2D转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)或倾斜(skew)等变形,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。来提升交互动态效果。
Transform除了能设定变成什么样,还能设定从哪里开始变,也就是变形源点(transform-origin),默认是从元素的最中心点开始的,我们可以通过设定它的值来改变变形源点。
以scale为例,我们可以用以下几种方式来改变元素的大小:
Transform: scale(1.1);----------整体放大1.1倍
Transform: scale(1.1,0.9);------横向放大1.1倍,纵向缩小0.9倍
Transform: scaleX(1.1);------仅横向放大1.1倍,纵向不变
Transform: scaleY(1.1);------横向不变,纵向放大1.1倍
Transform-origin: 0 0;--------以左上角为变形源点
4.过渡(transition)
元素用到变形属性,就不得不提到过渡属性,试想一个DIV旋转45度,如果是在一瞬间发生的,是不是觉得很突兀并毫无美感呢?那如果是在一定的时间区间内平滑地过渡,是不是就是一个类似动画的交互效果呢?
有了Transition,我们从一种效果转换到另一种效果无需JavaScript或者Flash,只需要一段CSS代码而已。
transition 属性是一个简写属性,用于设置四个过渡属性:
1.transition-property-----被改变的属性,如width,opacity,或者直接写all也可以。
2.transition-duration----过渡时间,以秒为单位,规定完成过渡效果需要多少秒
3.transition-timing-function----速度效果的速度曲线
4.transition-delay-----过渡效果何时开始
例如:
transition: width 2s ease-in-out;
相信前端工程师对CSS3的这些特性感到激动。它给网页设计师和开发者更多的力量,并且让许多方面都简化不少。现在,我们只需等待所有浏览器支持它。
CSS3笔记(一)的更多相关文章
- css3笔记系列-3.css中的各种选择器详解,不看后悔系列
点击上方蓝色字体,关注我 最详细的css3选择器解析 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...
- 【css3笔记】---- 渐变的秘密
<CSS揭秘>这本书非常不错,充满了干货和惊喜.以下主要是关于使用渐变做出来的一些效果的笔记.请用最新的现代浏览器观看. 首先要回顾下一个css语句: linear-gradient([ ...
- CSS3 笔记四(Transforms/Transition/Animations)
CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate() T ...
- CSS3 笔记三(Shadow/Text/Web Fonts)
CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to ...
- CSS3 笔记二(Gradients)
CSS3 Gradients Two types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial ...
- CSS3 笔记一(Rounded Corners/Border Images/Backgrounds)
CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border- ...
- CSS3笔记
CSS/CSS3在线手册:http://www.css119.com/book/css/ CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1. ...
- CSS3笔记之第四天
CSS3 2D 转换 了解2D变换方法: translate() rotate() scale() skew() matrix() translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参 ...
- CSS3笔记之第三天
CSS浮动 float:right 伪类: a:link {color:#FF0000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 * ...
随机推荐
- document 写法
# UfsProgressBar ## Component InfoA progress bar component of specified progress. ## Usage```<ufs ...
- Java并发编程--多线程中的join方法详解
Java Thread中, join()方法主要是让调用该方法的thread在完成run方法里面的部分后, 再执行join()方法后面的代码 例如:定义一个People类,run方法是输出姓名年龄. ...
- 钢管下料问题(钢管用量最少)Lingo求解
大家好,我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang !钢管下料问题1(钢管用量最少) 题目: 钢管原料 每根19m 客户需求 4m 50根 ...
- iOS中使用ZipArchive压缩和解压缩文件-备
为什么我需要解压缩文件 有许多原因能解释为什么我要在工程中使用压缩和解压缩功能,下面是几个常见的原因: 苹果App Store的50M下载限制 苹 果公司出于流量的考虑,规定在非WIFI环境下,限制用 ...
- js深入研究之扩展类,克隆对象,混合类(自定义的extend函数,clone函数,与augment函数)
1.类扩展 /* EditInPlaceField类 */ /* 扩展函数 */ function extend(subClass, superClass) { var F = function() ...
- C++类静态成员的初始化和用法探讨
一.一般类型的类的静态变量 1.首先看下面的代码: class CTest1 { public: static int m_num1; void printNum(){cout << m_ ...
- ASIHttpRequest:创建队列、下载请求、断点续传、解压缩
ps:本文转载自网络:http://ryan.easymorse.com/?p=12 感谢作者 工程完整代码下载地址:RequestTestDownload1 可完成: 下载指定链接的zip压缩文件 ...
- HDU2206 IP的计算 【经典题】
IP的计算 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrol ...
- 软件project(五)——可行性研究
一.目的 用最小的代价高效率的确定问题是否可以解决. 不是去解决这个问题,而是确定问题是否值得去解决.进行可行性研究简化了系统分析和系统设计的过程. 二.任务 (1)进一步分析问题定义. (2)分析员 ...