CSS3新技术Word格式.docx
- 文档编号:19615777
- 上传时间:2023-01-08
- 格式:DOCX
- 页数:13
- 大小:258.02KB
CSS3新技术Word格式.docx
《CSS3新技术Word格式.docx》由会员分享,可在线阅读,更多相关《CSS3新技术Word格式.docx(13页珍藏版)》请在冰豆网上搜索。
-webkit-border-bottom-rightright-radius:
10px;
多层边框
border的另一个非常帮的特性是使用gradientcolors,而不是用图片:
bordercolor{
border:
8px
solid
#000;
-moz-border-bottom-colors:
#0fff09
#00fff2
#00ff00
#ffd
#ff0
#aaa
#bbb
#ccc;
-moz-border-top-colors:
-moz-border-left-colors:
-moz-border-right-colors:
width:
200px;
}
bordercolor{
border:
8pxsolid#000;
-moz-border-bottom-colors:
#0fff09#00fff2#00ff00#ffd#ff0#aaa#bbb#ccc;
-moz-border-top-colors:
-moz-border-left-colors:
-moz-border-right-colors:
width:
}
边框图片
一个令人兴奋的CSS3新的border特性是支持border-image。
这样你就能为每一个独立的角和边框定义一个图片。
border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
css3阴影效果
阴影效果曾让Web设计师既爱又恨,现在,有了CSS3,你不再需要Photoshop
-webkit-box-shadow:
10px
25px
-moz-box-shadow:
box-shadow:
10px10px25px#ccc;
前两个属性设置阴影的X/Y位移,这里分别是10px,第3个属性定义阴影的虚化程度,最后一个设置阴影的颜色。
文字阴影也可以这样设置:
Html代码
1.text-shadow:
2px
5px
text-shadow:
2px2px5px#ccc;
css调整元素的尺寸
在最新版本的CSS中,调整元素的尺寸已经成为可能(不过目前仅Safari支持)
使用这个代码以后,我们的元素的右下角会出现一个小三角以提示用户这个元素是可以调整尺寸的。
代码依然很简单,可以说仅需要一行代码,当然你还可以配合使用一些曾经使用过的属性,比如”max-width”,“max-height”,“min-width”和“min-height”.
#resize
{
background-color:
#fff;
1px
resize:
both;
overflow:
auto;
#resize{
#fff;
1pxsolid#000;
both;
auto;
在这里主要说一下resize和overflow属性,resize:
的意思就是所有边都可以调整尺寸,它的值还有horizontal和vertical,顾名思义,就是横向和纵向。
而overflow是为了配合resize工作的,在这里使用auto.
CSS3的方式修改不透明度
现在你可以按惯例编写几行代码来实现不透明度的效果(hack)。
不过CSS3简化了这个流程。
这行代码很好记,仅仅是“opacity:
value;
”
#opacity
opacity:
0.3;
#opacity{
#000;
0.3;
详解CSS3中的属性选择符
在CSS3中还有功能更加强大的选择符等待我们去发掘和使用。
CSS3中的很多选择符已经在现代浏览器中得到很好的应用(IE8.0中也已经部分地支持了CSS3),但是这些基本功能上的支持还远远不能满足开发者使用的要求。
但是在某些情况下使用他们可以带来很好的超前体验,因此我认为了解一下CSS3新增选择符是如何使用还是有益处的。
选择符类型
表达式
描述
子串匹配的属性选择符
E[att^="
val"
]
匹配具有att属性、且值以val开头的E元素
E[att$="
匹配具有att属性、且值以val结尾的E元素
E[att*="
匹配具有att属性、且值中含有val的E元素
结构性伪类
E:
root
匹配文档的根元素。
在HTML中,根元素永远是HTML
nth-child(n)
匹配父元素中的第n个子元素E
nth-last-child(n)
匹配父元素中的倒数第n个结构子元素E
nth-of-type(n)
匹配同类型中的第n个同级兄弟元素E
nth-last-of-type(n)
匹配同类型中的倒数第n个同级兄弟元素E
last-child
匹配父元素中最后一个E元素
first-of-type
匹配同级兄弟元素中的第一个E元素
only-child
匹配属于父元素中唯一子元素的E
only-of-type
匹配属于同类型中唯一兄弟元素的E
empty
匹配没有任何子元素(包括text节点)的元素E
目标伪类
target
匹配相关URL指向的E元素
UI元素状态伪类
enabled
匹配所有用户界面(form表单)中处于可用状态的E元素
disabled
匹配所有用户界面(form表单)中处于不可用状态的E元素
checked
匹配所有用户界面(form表单)中处于选中状态的元素E
:
selection
匹配E元素中被用户选中或处于高亮状态的部分
否定伪类
not(s)
匹配所有不匹配简单选择符s的元素E<
!
---->
通用兄弟元素选择器
E~F
匹配E元素之后的F元素
初探CSS3RGBA颜色
浏览器的透明一直无法实现单纯的颜色透明,每次使用alpha后就会把透明的属性继承到子节点上。
换句话说,很难实现背景颜色透明而文字不透明的效果…直到RGBA颜色的出现这一切将成为现实。
实现这样的效果非常简单,设置颜色的时候我们使用标准的rgba()单位即可,例如rgba(255,0,0,0.4)这样就出现了一个红色同时拥有alpha透明为0.4的颜色.
background:
rgba(200,
54,
0.5);
color:
rgba(200,54,54,0.5);
CSS3中的Gird布局
刚刚看了一份W3CCSS3的文档,是关于Gird(网格?
)布局草案的说明。
无论它最终实现是否如草案中的描述,但这个功能本身就已经足够吸引人了。
图中蓝色的线不会出现在实际的网页中。
对于这个布局复杂的三栏网页来说,如果使用CSS3Gird布局的话,我们只需这样写:
body
{
columns:
3;
column-gap:
0.5in;
}
img
float:
page
top
right;
3gr;
body{columns:
column-gap:
}
img{float:
pagetopright;
其中,body部分声明页面为3栏,栏间距为0.5英寸;
img中float属性指明图片浮动位置为页面的右上角(CSS3定位好强大-__-),而宽度为3个栏宽。
只需这样两行CSS,我们就可以实现这个复杂的布局了。
真的很神奇。
Gird布局是好,不过如果你认为它很简单的话,你就大错特错了。
看看w3c中关于它的介绍,你会发现理解它的意义不亚于看懂天书。
好在还是个草案,但愿它到了正式版的时候,能够更加简单易用点。
Gird布局应用很广泛,最简单的例子就是内容的分栏显示。
但这个CSS3特性目前还没有任何浏览器可以支持它。
谁要是能第一个支持它(以及其它CSS3草案),那就酷毙了。
不知道,最近异常低调的IE8,会不会是这第一个吃螃蟹的人呢?
CSS3动画也逐渐受到大家的关注。
这次有幸修改淘宝网全站页头,小小地应用了下(详见
以下是自己的一点理解,希望能对大家有所帮助。
…
淘宝案例解析
需求:
鼠标移动到菜单上时旋转箭头,且给支持CSS3的浏览器加上旋转动画。
源码请查看demo源文件。
demo(
关于CSS3动画
从(http:
//www.w3.org/Style/CSS/current-work)可以看出,CSS动画涉及的知识点包括CSS2DTransformations,CSS3DTransformations,CSSTransitions,CSSAnimations。
Transformation补充定义了width,height,left,top等之外的一些可用于实现动画的属性,如rotate,scale,skew。
Transition和Animation用于定义动画的过程。
其中Transition可以实现简单的动画;
Animation则可以通过设定多个关键帧实现相对复杂的动画。
CanIUse?
兼容性
(数据来自
IE
Firefox
Safari
Chrome
Opera
CSS2DTransform
no
3.5
3.2
2.0
10.5
CSS3DTransform
4.*(Mac)
CSSTransition
3.7
CSSAnimation
4.0
可以看到,CSSAnimation目前只有Webkit内核浏览器支持,目前只能自己玩玩;
而Transition用来做渐进增强则较为合适。
一个简单的例子
让一个div元素在鼠标移上去时变大1倍,旋转180度,且背景由红变蓝。
htmlcode:
<
div>
/div>
csscode:
div{
position:
absolute;
left:
100px;
top:
height:
background:
red;
/*定义动画的过程*/
-webkit-transition:
-webkit-transform.5sease-in,background.5sease-in;
-moz-transition:
-moz-transform.5sease-in,background.5sease-in;
-o-transition:
-o-transform.5sease-in,background.5sease-in;
transition:
transform.5sease-in,background.5sease-in;
div:
hover{
/*定义动画的状态*/
-webkit-transform:
rotate(180deg)scale
(2);
-moz-transform:
-o-transform:
-transform:
blue;
demo((noIE)
无奈的浏览器前缀
这是个令人非常痛苦的问题,因为不得不针对每个浏览器copy一遍重复代码。
值得注意的是无前缀的标准代码需放在最后。
假如几年后某个属性成为标准,被浏览器默认支持了,这行代码会覆盖前面的定义,使得浏览器可以优先使用他。
稍微复杂点的例子(css3animation)
让一个div元素在点击后变大1倍,旋转180度,且背景由红变蓝;
然后向右移动400px。
demo((Safari,Chromeonly)
惊艳!
CSS3DTransformations
见livedemo(http:
//www.satine.org/research/webkit/snowleopard/snowstack.html)(MacSafariOnly,类似于
PS:
MacSafari的3DTransform、2DTransform和Opacity等视觉效果都是跑在GPU上的,为此我还特地验证下了WinSafari,果然不支持。
相关资料
webkitblog介绍animation/2dtransforms/3dtransforms的三篇文章
http:
//webkit.org/blog/138/css-animation/
//webkit.org/blog/130/css-transforms/
//webkit.org/blog/386/3d-transforms/
W3组织的CSS规范集
//www.w3.org/Style/CSS/current-work
苹果官方关于CSS视觉效果的文档
cssanimation的兼容性数据来源
3dtransform的运用app
//www.satine.org/research/webkit/snowleopard/snowstack.html
//css-
css3动画的应用
css3animation的入门应用:
钟的实现
//g-zone.org/test/g-clock/index.html
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS3 新技术