您应该知道的10个隐藏CSS3属性

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

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

1. 标签大小

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

pre {
	tab-size: 2;
}

请注意，每个浏览器对于制表符宽度单位应有多长都有自己的解释。因此，我们可能希望看到不同浏览器之间存在一些差异。在浏览器支持方面，根据CanIUse ， 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: ;
}

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

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;
}

与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

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

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

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

<div id="container">
	<div class="col">Column 1</div>
	<div class="col">Column 2</div>
	<div class="col">Column 3</div>
</div>

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

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

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

观看演示

翻译自: https://www.hongkiat.com/blog/css3-properties-need-to-know/