CSS3通过引入新属性使设计Web更加令人兴奋。尽管您可能知道一些流行的属性，例如box-shadow，border-radius和transform，但是还有许多您可能没有听说过或尝试过的属性，但是很高兴知道它的存在。

W3C一直在努力开发新的CSS属性，以使设计者，开发人员和用户的网络变得更好。同时，让我们看一下您可能不知道但应该真正检出的这10个属性。

1. 标签大小

大多数代码编辑器都配备了“ Tab Size”控件，该控件允许开发人员指定使用Tab键制作的代码缩进宽度。直到最近，我们才能够自定义嵌入在网页上的代码的缩进形式。

请注意，每个浏览器对于制表符宽度单位应有多长都有自己的解释。因此，我们可能希望看到不同浏览器之间存在一些差异。在浏览器支持方面，根据CanIUse，该tab-size属性可在Chrome，Opera，Firefox和Safari 中使用。

2. 文字渲染

该text-rendering属性将告诉浏览器如何在网页中呈现文本。文本将针对性能，易读性或精度进行优化，这最终将决定文本的质量。在下面的屏幕快照中，仔细查看文本的字距，以比较“普通”文本和optimizedLegibility文本：

有关好的字体的更多建议，请查看实用字体。

 

3. 字体拉伸

除了常规的Normal，Bold和Italic外，某些字体还提供其他外观。例如，Helvetica Neue或Myriad Pro带有“凝结”，“超凝结”和“半凝结”等面孔。这font-stretch是引入新属性的地方。它使我们能够应用这些面孔。

我们可以font-stretch结合使用font属性，例如font-style。这是一个例子：

该font-stretch属性当前仅在Firefox和Internet Explorer 9（及更高版本）中有效。

 

4. 文字溢出

该text-overflow属性指定其容器溢出或截断的内容的表示形式。默认值设置为clip仅隐藏截断的文本。或者，您可以将其设置为使用水平省略号ellipsis来描述截断的文本或内容，如下所示。

如果您想知道，水平省略号是末尾的三个点，通常表示省略的内容。

5. 写作模式

并非每种语言都是从左到右书写的。相反，有些语言是像日语那样从上至下书写的，而像阿拉伯语和希伯来语则是从右至左书写的。

为了适应这些语言，writing-mode引入了一个名为的新属性，使开发人员可以通过CSS更改内容编写方向。作为示例，此代码段指导内容流从左到右（与语言无关）。

要更改内容的流程，请从上到下移动，将属性设置为以下vertical-lr值：

6. 指针事件

该pointer-events属性允许我们在指针事件（例如拖动，悬停和单击）下控制元素的行为。使用此功能，单击受影响的链接不会执行任何操作。该链接将被完全禁用，甚至不会将用户定向到该href属性中指定的地址。

但是由于一些关键问题，该pointer-events属性被保留，直到下一个CSS修订版CSS4为止。

7. 图像方向

在图像编辑器（如Photoshop）中，可以通过旋转或翻转图像来改变图像方向。现在，CSS3允许您通过名为的新属性对网页上的图像执行相同的操作image-orientation。这是一个有关如何使用此属性水平翻转图像的示例。

您也可以通过将属性值指定为来保留原始图像方向from-image。

8. 图像渲染

与该text-rendering属性类似，image-rendering定义网页上的图像质量，尤其是在强制调整图像大小时。随着此属性的出现，出现了许多新值，浏览器对此也有自己的规范。crisp-edges例如，该值可保留对比度并防止图像的边缘模糊，目前已-webkit-optimize-contrast在Webkit浏览器和nearest-neighborInternet Explorer中进行了转换。

这是一项实验性技术，因此我们可能会在实现中看到一些更改。

9. 栏

该columns属性使开发人员可以轻松地将Web内容排列到各列中。我们将内容分成两列，如下所示：

在支持此属性的浏览器（例如Chrome和Safari）中，我们将看到这样排列的内容。

结合CSS Shape和一点点创意，您可以拥有流畅，更诱人的内容布局，就像在网站上的时尚杂志中看到的一样。

10. Flex

该flex属性旨在使响应式网格的构建更加无缝，同时解决当前主流的Web版面布局方法中的几个问题– float属性。

最重要的是，通过使用flex属性，Web布局将占据其容器的全部高度，这以前很难处理（请看我们之前关于此问题的文章：CSS等于列高）。

现在，假设您要构建一个包含三列的Web布局，则可以按这种方式安排标记。

然后，使用flex属性将它们构建为列，如下所示。

加上字体和背景色等装饰风格，我们将获得以下结果。

厦门网站建设