如何快速掌握css
要想掌握 CSS, 首先要学会 HTML ，我刚开始是从零开始学习的，花了一个月时间学习 HTML ，没有老师，书就是我唯一的老师，也没有上网的条件！一个月过后，我就开始学习 CSS ，刚开始
CSS3 box-ordinal-group 属性详解
CSS3 box-ordinal-group 指定的一个 box 的子元素的显示顺序： .box { display:-ms-flexbox; /* Internet Explorer 10 */ display:-moz-box; /* Firefox */ display:-webkit-box; /* Safari and Chrome */ display:box; border:1px solid blac
CSS3 border-image-repeat 属性
设置重复图像的方式： div { border-image-source: url(border.png); border-image-repeat: repeat; } border-image-repeat 属性用于图像边界是否应重复（ repeated ）、拉伸（ stretched ）或铺满（ rounded ）。 CSS 语
CSS3 倒影语法大全
box-reflect ： none | direction offset ? mask-box-image none ：此值为 box-reflect 默认值，表示无倒影效果； direction ：此值表示 box-reflect 生成倒影的方向，主要包括以下几个值： above ：表示生成的倒
CSS3技术中box-direction 属性详解
实例 由右至左，显示一个 div box 的子元素： div { width:350px; height:100px; border:1px solid black; /* Internet Explorer 10 */ display:-ms-flexbox; -ms-flex-direction:row-reverse; /* Firefox */ display:-moz-box; -moz-box-dir
CSS3 filter（滤镜）属性详解
css3 的滤镜 filter 属性，可以对网页中的图片进行类似 Photoshop 图片处理的效果， h5 时代的来临，我们可以通过 css 对图像进行处理。 浏览器支持情况：只有 IE 浏览器不支持 filter （滤镜
8种css3技术的hover动画效果
hover 动画，简言之就是鼠标移上去触发的动画，就是触发了鼠标的 hover 事件时能看到的动画！ 1. 简单动画 html span class=ech-bigbig/spanspan class=ech-smallsmall/span css .ech-big,.ech-small { transition:
CSS3 圆形风格面包屑代码详解
html head meta charset=utf-8 titleCSS3 圆形风格面包屑导航 /title link rel=stylesheet type=text/css href=http://css.h5course.cn/reset.css / style type=text/css html, body { height: 100%; padding: 0 100px; background-color: #59a386;
Css3技术中的transition属性
可以让动画在 CSS 层面实现，此时不是利用 setInterval() ，不是定时器，而是底层 C++ 在渲染，渲染动画的质量、丝滑程度都要远远优于 JS 、 jQuery 。 要颠覆我们传统制作网页动画的思维
Css3中6中动画效果代码
1. 闪烁效果 html span class=ech-flashflash/span css .ech-flash:hover { animation: flash .5s ease; 2. 闹钟振铃效果 html span class=ech-shake-timeshake-time/span css /* 仿闹钟振铃效果 */.ech-shake-time:hover { animation: shak
Css3中hover动画的颜色动画效果
颜色动画效果主要是利用 :before 和 :after 进行实现的，所以，大家如果使用的时候，切记 :before 和 :after 没有被占用，否则会显示不正常。 1. 颜色块变化 html span class=ech-fadefade/span css /
Css3中的flex属性
flex-direction ： row | row-reverse | column | column-reverse; 横排 | 反向横排 | 竖排 | 反向竖排 flex-wrap ： nowrap | wrap | wrap-reverse; 不换行 | 换行 | 换行，第一行在下方 flex-flow ： flex-flow: flex-directi
Css3选择器基础知识
div p 选择父元素为 div 的所有子元素。 div + p 选择紧接在 div 后的所有子元素。 [target] 选择带有 target 属性的元素 a[target] {...} [target=_blank] 选择 target 为 _blank 的所有子元素。 [title~=flow
Css3中box-pack属性详解
对 div 中的子元素同时使用 box-align 和 box-pack 的居中属性： div { width:350px; height:100px; border:1px solid black; /* Internet Explorer 10 */ display:-ms-flexbox; -ms-flex-pack:center; -ms-flex-align:center; /* Firefox *
Css3制作动态开关的效果代码
!DOCTYPE html html head title/title style type=text/css body{ background: black; } * { margin: 0; padding: 0; } body { padding: 26%; } .button { display: inline-block; position: relative; height: 40px; -webkit-user-select: none; -webkit-tap
CSS3 target-name 属性
在新窗口中打开所有超链接： a { target-name:new; } 任何主流浏览器都不支持 target-name 属性。 语法 target-name: current|root|parent|new|modal|name current 在链接所在的框架、标签页或窗口中打开超链
Css3中的transform 渐变属性
translate() 素从其当前位置移动，根据给定的 left （ x 坐标） 和 top （ y 坐标） translate(x,y) 定义 2d 转换 xy 为数字 x 正为右 负为左 y 正为下 负为上 translate3d(x,y,z) 定义 3D 转换 scale() 方法
Css3的动画属性
animation 属性是一个简写属性，用于设置六个动画属性： animation-name 为 @keyframes 动画规定一个名称： mymove animation-duration 定义动画完成一个周期所需要的时间，以秒或毫秒计 animation-ti
必须了解的css中的层叠性及权重的比较
层叠性：多个选择器选中同一个标签，设置同一个样式，浏览器中加载时，不会加载所有的属性值，挑选其中一个加载，其中一个值层叠 / 覆盖掉其他的值。 要实现层叠或覆盖就涉及到
CSS技术中的position定位几种方式
在 CSS 中，我们是通过定位属性 position 来进行定位的，具体它有如下几个属性值。常见的属性有如下几个： 值描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进
十个CSS3知识清单
1 、文本效果 阴影： text-shadow:X 偏移 Y 偏移 模糊程度 阴影颜色； text-shadow: 5px 5px 5px #FF0000; 文本溢出： text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 2 、字体 @font-face { font-family : 字体
纯css3实现的竖形二级导航的实例教程
之前为大家分享了好多导航菜单。今天给大家带来一款纯css3实现的竖形二级导航。这款导航菜单可以是无限级。一起看下效果图： 实现的代码。 html代码： XML/HTML Code 复制内容到剪贴板
一款非常漂亮的纯CSS3打造的竖形无限级导航特效
之前为大家分享了好多导航菜单。今天给大家带来一款纯css3实现的竖形无限级导航。这款导航菜单可以是无限级。一起看下效果图： 实现的代码。 html代码： 复制代码 代码如下: div
关于CSS3动画回调处理的一些内容
我们在做js动画的时候，很多时候都需要做回调处理，如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等，但在使用CSS3动画时能不能捕获到运动的状态做回调处
CSS3属性background-size使用指南
以下内容摘自MDN。因时间原因没能好好整理学习，先引用下来，有时间时再细细整理。 background-size 设置背景图片大小。 复制代码 代码如下: /* 关键字 */ background-size: cover background-size
CSS3属性box-shadow使用指南
今天比较忙，没能好好看新东西，就记录一个常用的CSS3属性吧：box-shadow，表示阴影，如果设置了border-radius圆角，则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属
CSS3属性box-sizing如何使用
box-sizing用于改变CSS盒子模型，从而改变元素宽高的计算方式。 box-sizing取值如下： 复制代码 代码如下: box-sizing: content-box | padding-box | border-box 默认值是 content-box ，对应CSS2.1规范中标准
CSS3 Media Queries
一、Media Queries 支持的属性 属性 值 Min/Max 描述color integer yes 每种色彩的字节数color-index integer yes 色彩表中的色彩数device-aspect-ratio integer/integer yes 宽高比例device-height length yes 设备屏幕的
CSS3属性box-sizing使用指南,需要的朋友可以参考下
box-sizing用于改变CSS盒子模型，从而改变元素宽高的计算方式。 box-sizing取值如下： 复制代码 代码如下: box-sizing: content-box | padding-box | border-box 默认值是 content-box ，对应CSS2.1规范中标准
使用纯CSS实现的win8开机加载的动画特效
今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图： 实现的代码。 html代码： 复制代码 代码如下: div class=wrapp div class=text h1 Windows
