伸缩盒子 在之前的布局中，如果采用浮动，则必须特别小心，一旦添加了外边距，很可能导致盒子掉下来。为了达成响应的排版，浮动要做很多设计，还要结合媒体查询进行很复杂的逻辑。 CSS3中引入了伸缩盒子布局，很好的解决了弹性排版的问题。先通过两个例子来看一下。 伸缩盒子简单使用 假如需要水平排布三个盒子，采
CSS3 媒体查询与响应式网页 在学习Bootstrap的时候，已经了解了响应式网页的概念。现在移动互联网的兴起，让Bootstrap都以移动开发作为优先，Bootstrap3用浮动做出了响应式布局，Bootstrap4更是用CSS3的弹性盒子进行了响应式布局。现在通过CSS来了解一下媒体查询特性和
CSS3 渐变 渐变的例子在日常生活中出现的很广泛，抬头看一看云层中的太阳或者月亮，从亮到周围的不亮部分就是一个渐变过程。 CSS3中引入了渐变的例子，而且可以用渐变来替代元素的背景图片，之前通常采用静态的PNG渐变背景图片，但是静态的背景图片在调整大小的时候，很难做到动态效果。 CSS的渐变有两种
CSS3 动画 如果制作过动画就可以知道，动画的本质是一帧一帧图片，CSS动画的原理也是这样，只不过不是将所有帧全部制作出来，而是有关键帧，在加上一系列属性控制，就可以作出动画来了。 CSS动画的属性名称叫做 animation，有8个子属性，还需要搭配 @keyframe name 来设置关键帧，
CSS3 变形 网页中除了文字之外，对于形状的调制和控制也是非常重要的一环。在CSS3之前，需要对形状和图片进行调整，往往通过Flash和JavaScript才能完成，现在可以通过CSS3的2D变换和3D变换来轻松实现效果。 实现变形效果的方法是在元素样式中定义transform属性，属性的值是变形
CSS3 过渡 之前学习的CSS3的部分，大部分都是对静态元素的增强。CSS3还增加了一系列动画交互效果，而且无需使用JavaScript或Flash。使用CSS的过渡需要的资源要少很多。 关于CSS3过渡和动画，可以参考阮一峰的博客 过渡属性transition是新增的一个通用的属性，类似于JS里
CSS3 颜色 设计Web页面不可缺少的就是颜色，对于颜色的运用是设计方面的事情，但是对于前端开发，合理的使用颜色作出效果也是很重要的。 CSS3在CSS2的基础上增加了RGBA，HSL和HSLA模式，对于所有的样式属性中需要颜色的部分，在CSS3都可以采取如下的方式使用颜色： 色彩名称 rgb(R
CSS3 文本 CSS1和CSS2的文本 CSS的文本主要分为3个大类，字体，颜色和文本排版样式，颜色很简单就是color属性，后边还会单独介绍颜色，这里复习一下字体属性和文本排版样式属性。由于文本是很重要的一环，所以CSS3之前的文本功能也比较齐全了。 CSS字体属性 属性 功能 值 font-f
CSS3 背景 复习一下背景的基础内容 CSS1和CSS2的背景 背景有5个属性 background-color 背景颜色 background-image 背景图片，通过url("URL")方式指定图片位置。 backgroud-repeat 背景图片展示方式 backgroud-attachm
Gundam Battle 生存突击把前作宇宙的好口碑败坏完了
