弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂而易错hacks方法（如使用float进行类似流式布局）。 其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下： flex-flow: <flex-direction> || <flex-wrap> flex-direction: row（初始值） | row-reverse | column | column-reverse flex-wrap: nowrap（初始值） | wrap | wrap-reverse flex-direction定义了弹性项目在弹性容器...
弹性项目可以按弹性容器当前行的cross axis来对齐，和justify-content类似，但在垂直方向上。其中align-items属性用于弹性容器，而align-self用于弹性项目。 align-items 为弹性容器中所有项目设置缺省对齐属性，包括匿名弹性项目。align-self 可以为单独的弹性项目设置对齐来覆盖缺省值。 （对于匿名弹性项目，align-self总是匹配对应弹性容器的align-items的值。） 如果弹性项的cross-axis外边距是auto，align-self属性没有效果...
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配，也会在发生内容溢出时影响项目的对齐。 注意：弹性布局中有两个基本术语main axis和cross axis，一般情况下，我们可以把它们各自看作是屏幕上的行向和列向（但是严格讲，这和写模式有关）。 那么main-start和main-end就可以分别被看作是...
一、前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充，而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性，因此当前仅Webkit内核的浏览器支持CSS3 Filter，而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了，而IE5.5~9则使用IE滤镜、JS+DIV或VML处理！本篇为先占个坑，以后慢慢填^_^！！！ CSS3 Filter兼容性表...
原文来自：http://www.cnblogs.com/jr1993/p/4677921.html 主 题 今天手把手教大家用 CSS 3制作圆形滚动 进度条 动画 ，想不会都难！那么，到底是什么东东呢？先不急，之前我分享了一个css实现 进度条 效果的博客 《 CSS 实现 进度条 和订单进度条 》， 但是呢，那篇博客只是制作出来效果而已，并没有 动画 效果，因为当时正期末复习期间，所以就省了制作 动画 的时间成本。所以，今天就一起把各种效果都实现吧！ 内...
原本自己也想画大白，正巧看到一位同学（github： https://github.com/shiyiwang ）也用相同的方法画了。 且细节相当到位。所以我就fork了一下，在此我也分享一下。 同时，我也希望有更多的同学发挥自己的想象力，来找个东西画画。 如果看过我前几次的分享，肯定能马上想到大白的各个部位是怎么实现的。 GitHub传送门： https://github.com/lancer07/css3_Baymax 第一步：头 ...
首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错，这个炫酷的效果都是用css3实现的。 下面是动画实现所需要用到的几个css3属性。 1、perspective：用来实现一个3d的场景 写3D效果的第一步是要创建一个3D场景，即索要实现效果的模块。...
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。 插入纯文字 content:"插入的文章"，或者content:none不插入内容 html: 这是h1这是h2 css h1::after{ content:"h1后插入内容"}h2::after{ content:none} 运行结果：https://jsfiddle.net/dwqs/Lmm1r08x/ 嵌入文字符号 可以使用content属性的open-quote属性值和close-q...
CSS3 提供给了我们非常多的转换函数： 2D: translate, rotate, scale, skew. 3D: translate3d, rotate3d, scale3d, skew3d. 只需要将这些函数作为transform属性的值，就可以设置相应的效果。 CSS3 动画则是将这些效果以及其他CSS属性按照你设定的方式来进行互相转变。 1. 动画相关属性 属性 描述 @keyframes 定义动画各个阶段的状态的代码段 animation 所有动画属性的简写属性，除...
columns语法：columns：[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中：[ column-width ]：设置或检索对象每列的宽度；[ column-count ]：设置或检索对象的列数。 css代码： body{font:14px/1.5 georgia,serif,sans-serif;}p{margin:0;padding:5px 10px;background:#eee;}h1{margin:10px 0;font-size:16px;}.test{ width:628px; border:10px solid #000; -moz-columns:200px 3; -web...
border-image简介 css3中新增了一个属性border-image，这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-style)。border-image 是一个简写属性，分别设定了以下几个属性。 border-image-source border-image-slice border-image-width border-image-outset border-image-repeat 为什么图片可以作为边框？ 在开始学习border-image之前我有一个疑问，图片是怎么应用到容器的边...
转载自个人博客 1.常用选择器 1.1标签选择器 p{ }/*选择标签名为p的元素*/ 1.2类选择器 .box{ }/*选择class名为box的元素*/ 1.3ID选择器 #pid{ }/*选择id名为pid的元素*/ 1.4通配符选择器 *{ }/*选择页面中所有的元素*/ 1.5选择器前缀 div.bd{}/*选中class名为bd且标签为div的元素*/ 1.6属性选择器 [disabled]{}/*选择带有属性disabled的所有元素*/[type=button]{}/*选择type属性为button的所有元素*...
原本自己也想画Hello Kitty，正巧看到一位外国友人Lauren McConachie（她的个人网站： http://lorenai.com 。）也用相同的方法画了。 且细节相当到位。在此我也分享一下。（出于尊重原作者的目的，CSS我就不修改了） GitHub传送门： https://github.com/lancer07/css3HelloKitty 第一步：从头说起 难点是胡须，因为胡须有点弯的，所以每根胡须需要2个元素来实现 ...
本篇文章给大家带来的内容是关于CSS3有哪些新特性？CSS3新特性详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。【推荐教程：CSS教程】CSS3有哪些新特性？新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}弹性盒模型 display: flex;多列布局 column-count: 5;媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.e...
本篇文章给大家带来的内容是关于css3中的播放方式animation-timing-function属性详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。animation-timing-function属性在CSS3中，我们可以使用animation-timing-function属性来设置动画的播放方式，所谓的“播放方式”主要用来指定动画在播放时间内的速率。其中，animation-timing-function属性跟transition-timing-function属性类似，大家可以对比理解记忆一下。语...