-
嵌入字体@font-face @font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。 语法： @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。 比如： p { font-size :12px; font-family : "My Font"; /*必须项，设置@font-face中font-family同样的值*/查看全部
-
文本阴影text-shadow text-shadow可以用来设置文本的阴影效果。 语法： X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移； Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移； Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0； Color：是指阴影的颜色，其可以使用rgba色。查看全部
-
background-image:linear-gradient(to bottom right,red,blue,green,yellow);查看全部
-
Gradient分为线性渐变(linear)和径向渐变(radial) linear-gradient(to bottom,#fff,#999) 渐变类型：径向为radial 0deg to top 从下向上 90deg to right 从左到右 180deg to bottom 从上向下 270deg to left 从右向左 to top left 右下角到左上角 to top right 左下角到右上角查看全部
-
border-image{ background:#F4FFFA; width:210px; height:210px; border:70px solid #ddd; border-image:url(borderimg.png) 70 repeat }查看全部
-
语法: border-image: 边框图像位置 切割图片的宽度 图片延伸方式; 图片延伸方式 3种: 1.round (平铺) 2.repeat (重复) 3.stretch (拉伸) border-image{ background:#F4FFFA; width:210px; height:210px; border:70px solid #ddd; border-image:url(borderimg.png) 70 repeat }查看全部
-
FrankWu box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];向盒子添加阴影。 X轴偏移量：必须。水平阴影的位置。允许负值。 Y轴偏移量：必须。垂直阴影的位置。允许负值 阴影模糊半径：可选。模糊距离 如果添加多个阴影，只需用逗号隔开即可。 阴影扩展半径：可选。阴影的尺寸。 阴影颜色：可选。阴影的颜色。省略默认为黑色。 投影方式：可选。（设置inset时为内部阴影方式，如果省略则为外部阴影方式）。 注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。 如果添加多个阴影，只需用逗号隔开即可。查看全部
-
块阴影与文字阴影 可以对任意DIV和文字增加投影效果。 色彩 CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL ， CMYK ，HSLA and RGBA。 渐变效果 以前只能用Photoshop做出的图片渐变效果，现在可以用CCS写出来了。IE中的滤镜也可以实现。 个性化字体 网页上的字体太单一？使用@Font-Face 轻松实现定制字体。 多背景图 一个元素上添加多层背景图片。 边框背景图 边框应用背景图片。 变形处理 你可以对HTML元素进行旋转、缩放、倾斜、移动、甚至以前只能用JavaScript实现的强大动画。 多栏布局 可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。 、媒体查询 针对不同屏幕分辨率，应用不同的样式。查看全部
-
CSS3能做什么？ CSS3给我们带来了什么好处呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。 CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。 选择器 以前我们通常用class、 ID 或 tagname 来选择HTML元素，CSS3的选择器强大的难以置信。它们可以减少在标签中的class和ID的数量更方便的维护样式表、更好的实现结构与表现的分离。 圆角效果 以前做圆角通常使用背景图片，或繁琐的元素拼凑，现在很简单了 border-radius 帮你轻松搞定。查看全部
-
选中文本才会看到效果查看全部
-
设置动画时间外属性 animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下： 属性值 效果 none 表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 forwards 表示动画在结束后继续应用最后的关键帧的位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果查看全部
-
设置动画的播放状态 animation-play-state属性主要用来控制元素动画的播放状态。查看全部
-
设置动画播放方向 animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值：normal、alternate 1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。查看全部
-
设置动画播放次数 animation-iteration-count属性主要用来定义动画的播放次数。 语法规则： animation-iteration-count: infinite | <number> [, infinite | <number>]*查看全部
-
目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。 前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera IE党注意了：此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器的最高版本学习本课程。查看全部
举报
0/150
提交
取消