PILIpilipala的博客

CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 CSS3 弹性盒子内容 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 fle

CSS3过渡 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容： 指定要添加效果的CSS属性 指定效果的持续时间。 应用于宽度属性的过渡效果，时长为2秒： div { transition: width 2s; } 若未指定期限，transition将没有任何效果，因为默认值是0。 添加多个样式的变换效果，添加的属性由逗号分隔： div { transition: width 2s, height 2s, transform 2s; } 过渡

CSS3 转换 CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。转换的效果是让某个元素改变形状，大小和位置。 2D转换 translate() ----根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 div { width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2 { transform:translate(50px,100px); -ms-tra

CSS3渐变（Gradients） 通过CSS3渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡 渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的 CSS3 定义了两种类型的渐变： 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义 线性渐变相关属性：background-image 线性渐变 从上到下 语法： background-image: linear-gradient(direct

一些最重要CSS3模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 CSS3 边框 CSS3边框属性有： border-radius、box-shadow border-image CSS3圆角------border-radius 一个用于设置所有四个边框的半径属性的速记属性 语法：border-radius: 1-4 length|% / 1-4 length|%; border-radius属性若只指定一个值，就会产生四个圆角 若要分开写则其他属性为：b