CSS 系列之css3 新特性 - 常用

发表于 分类于 阅读次数： 2.8k 7 分钟
CSS 系列的第十篇文章，css3 新特性，css3 中增加了许多特性，一起来了解一下吧，也许你现在使用的许多特性也都是在这里添加的哦～

我们来聊聊 css3 的一些新特性，但是不会仔细的去讲，会让你们了解一个大概，具体的可以自行去 MDN 查看。

圆角 - border-radius

圆角，顾名思义，其实就是个格子的四个角设置圆角，设置方式也很简单。就简简单单提一下。

1
2
3
4
5
.main {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

我们来看效果，其实就是四个角设置一个弧度。

图1. border-radius

阴影 - box-shadow

在 css3 中，增加了阴影，以前的实现只能用图片，或者在添加一个阴影格子来实现。

语法

语法很简单，就是直接使用 box-shadow 来设置。

1
2
3
4
.shadow {
  box-shadow: 水平阴影位置偏移 | 垂直阴影位置偏移 | 模糊距离 | 阴影大小 |
    阴影颜色 | 阴影开始方向;
}

例子

1
2
3
4
5
6
.main {
  width: 100px;
  height: 100px;
  background-color: #f2cda5;
  box-shadow: 5px 5px 10px #999;
}

图2. box-shadow

过渡效果 - transition

什么是过渡呢？其实很好理解，类似于动画，在两个切换之间，让它看起来有一个过渡。

我们来举个例子，鼠标放上时变色。

1
2
3
4
5
6
7
8
9
.main {
  width: 100px;
  height: 100px;
  background-color: #f2cda5;
}
.main:hover {
  background-color: #1890ff;
  transition: all 2s; /* 设置一个两秒的过渡 */
}

我们来看看效果吧。

图3. transition

很明显，有了一个缓慢变色的过程，这就是过渡。

翻转 - transform

transform 允许我们做一些旋转、缩放、倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

我们也举一个简单的例子，就是翻转。

1
2
3
4
5
6
.main {
  width: 100px;
  height: 100px;
  background-color: #f2cda5;
  transform: rotate(45deg);
}

在这里，我们添加了 rotate 对元素进行翻转 45度 角。

我们来看看结果吧，就是这么神奇。

图4. transform

动画 - animation

MDN 中的定义。

CSS animations 使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧

我们还是使用一个简单的例子来演示一下旋转、变色、放大。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.main {
  width: 20px;
  height: 20px;
  background-color: #f2cda5;
  animation: turnAround 2s ease 0s infinite;
}
@keyframes turnAround {
  0% {
    transform: rotate(0deg);
    width: 30px;
    height: 30px;
  }
  25% {
    transform: rotate(45deg);
    background-color: #f8dca3;
    width: 40px;
    height: 40px;
  }
  50% {
    transform: rotate(90deg);
    background-color: #c6ce93;
    width: 50px;
    height: 50px;
  }
  75% {
    transform: rotate(135deg);
    background-color: #95b5c0;
    width: 60px;
    height: 60px;
  }
  100% {
    transform: rotate(180deg);
    background-color: #1890ff;
    width: 70px;
    height: 70px;
  }
}

我们来看看实现动画的效果。

animation

媒体查询 - @media

媒体查询，第一次听到肯定很多人都觉得很奇特，那么它是做什么的呢？

具体的可以去查看 MDN 媒体查询，我们来看看上面对媒体查询的解释。

媒体查询（Media queries）非常实用，尤其是当你想要根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器视窗\宽度）来修改网站或应用程序时。

当然理论很难理解，我们举一个简单的例子。

我们来看看代码。

1
2
3
4
5
6
7
8
9
10
11
.main {
  height: 200px;
  width: 200px;
  background-color: #f2cda5;
}
@media screen and (max-width: 600px) {
  /* 媒介查询，最大宽度小于等于 600 时，显示的样式 */
  .main {
    background-color: #95b5c0;
  }
}
1
<div class="main"></div>

我们来看看结果。

图.6 媒介查询 media 结果

可以看到，在宽度 600 的时候，颜色发生了变化，所以，媒体查询 max-width 定义了，宽度最大 600 或以下生效。

弹性盒子 - flex

flex 布局，在这里就不进行赘述了，在我的 flex 文章中，已经详细进行叙说了，有兴趣的可以直接去看。在这里，我就直接放一下 flex 的属性了。

容器属性

  • flex-direction： 决定了主轴的方向。
  • flex-wrap：设置在轴线上是否进行换行。
  • flex-flow：属性就是 flex-direction 和 flex-wrap 两个属性的简写方式，默认值为 row nowrap。
  • justify-content：用来设置项目在主轴方向上的对齐方式
  • align-items：用来设置项目在交叉轴方向上的对齐方式
  • align-centent：用来设置多根轴线的对齐方式，如果只有一根轴线，则不起作用。

项目属性

  • order：调整项目的排列顺序，数值越小，排列在越前面，默认为 0。
  • flex-grow：定义了项目的放大比例，默认为 0，如果空间又剩余，也不放大
  • flex-shrink：定义了项目的缩小比例，默认为 1，如果空间不足，该项目会缩小。
  • flex-basis：定义了分配多余空间之前，项目占据的主轴空间。默认值为 auto，即项目的本来大小。
  • flex： flex-grow，flex-shrink，flex-basis 三个属性的缩写，默认值为 0 1 auto
  • align-self：允许单个 item 可以有其他项目不一样的对齐方式，可以覆盖容器属性中 align-items 属性，默认值为 auto。

参考资料

  1. 个人总结（css3 新特性）
  2. MDN transform
  3. MDN transition
  4. MDN 动画 animation
  5. MDN 媒体查询
  6. myBlog - flex
相关文章推荐
-------------------- 本文结束 感谢阅读 --------------------