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的这些特性感到激动。它给网页设计师和开发者更多的力量,并且让许多方面都简化不少。现在,我们只需等待所有浏览器支持它。

时间: 2024-10-29 01:51:43

CSS3笔记(一)的相关文章

CSS3笔记【不定时更新】

box-sizing 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为. 宽度和高度分别应用到元素的内容框. 在宽度和高度之外绘制元素的内边距和边框. border-box 为元素设定的宽度和高度决定了元素的边框盒. 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制. 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度. inherit 规定应从父元素继承 box-sizing 属性的值. [作为处理当有border或者paddi

图解css3 -- 笔记2

text-shadow text-shadow:none|[color  x-offset  y-offset  blur-radius] 注意: 在ie下,可以使用滤镜filter:shadow(Color=颜色值, Direction=数值, Strength=数值) 其中:Direction用来设置投影的方向,0度在文本的上面,45度在文本的右上角,依次 Strength用来设置阴影的强度 text-overflow 有两个值:clip不显示省略标记(…),只剪裁 ellipsis文本溢出

css3笔记

前缀是-webkit-的Safari和Chrome支持 前缀是-moz-的Firefox支持 前缀是-o-的Opera支持 CSS3边框 border-radius (CSS3圆角) border-radius: 2em / 2em 1em 4em / 1em 3em; is equivalent to: border-top-left-radius: 2em / 2em / 1em; border-top-right-radius: 2em / 1em / 3em; border-bottom

前端CSS3笔记

第1章CSS3简介 如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. 1.1   CSS3的现状 1.浏览器支持程度差,需要添加私有前缀 2.移动端支持优于PC端 3.不断改进中 4.应用相对广泛 1.2   如何对待 1.坚持渐进增强原则 2.考虑用户群体 3.遵照产品的方案 4.听Boss的 第2章准备工作 2.1   统一环境 由于CSS3兼容性问题的普遍存在,为了避

CSS3 笔记四(Transforms)

CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). 2> rotate The rotate()

css3 笔记

1. 设置或检索当内容超过指定容器的边界时是否断行. CSS3中将 <' word-wrap '> 改名为 <' overflow-wrap '>: 由于历史原因,当你使用 <' overflow-wrap '> 时,最好同时使用 <' word-wrap '> 作为备选,作向前兼容.

CSS3笔记和CSS实用技巧

CSS/CSS3在线手册:http://www.css119.com/book/css/   50个CSS代码片段必备:http://blog.csdn.net/holandstone/article/details/17613089   CSS规范和常用模块代码段:http://nec.netease.com/   必须熟记的30类CSS选择器:http://bbs.html5cn.org/thread-85312-1-1.html   CSS制作水平垂直居中对齐所有办法:http://www

CSS3笔记-加强版

属性选择器: E[attr]只使用属性名,但没有确定任何属性值 E[attr="value"]指定属性名,并指定了该属性的属性值 E[attr~="value"]指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的"?"不能不写 E[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的 E[attr$="value"

CSS3 笔记五(Buttons)

Some examples 1> Input width animation Search: Code 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 input[type=text] { 6 width: 100px; 7 -webkit-transition: ease-in-out, width .35s ease-in-out; 8 transition: ease-in-out,width .3