CSS3通过引入新属性使设计Web更加令人兴奋。 虽然您可能知道一些流行的属性，例如 ， 和 ，但是您可能还没有听说过或尝试过许多其他属性，但是很高兴知道它们的存在。

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

1.

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

pre {	tab-size: 2;}

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

2.

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

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

3.

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

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

h1 {	font-style: bold;	font-stretch: ;}

4.

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

.content-box {	text-overflow}

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

5.

并非每种语言都是从左到右书写的。 而是从顶部到底部写一些语言，例如日语，从右到左写阿拉伯语和希伯来语。

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

p {	writing-mode: rl-tb;}

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

p {	writing-mode: vertical-lr;}

6.

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

a {	pointer-events: none;}

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

7.

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

img {	image-orientation: flip;	}

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

img {	image-orientation: from-image;}

8.

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

img {	image-rendering: crisp-edges;	image-rendering: -webkit-optimize-contrast;/* Webkit */	-ms-interpolation-mode: nearest-neighbor;  /* IE */}

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

9.

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

.content {	columns: 2;}

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

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

10.

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

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

    
	
     
      Column 1
     
	
     
      Column 2
     
	
     
      Column 3
     
    

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

#container {	width: 600px;	height: 300px;	display: flex;}#container .col {	flex: auto;}

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

翻译自: