css忽略事件_您可能忽略了10个（更多）CSS技巧

最新推荐文章于 2023-08-29 15:34:29 发布

cune1359

最新推荐文章于 2023-08-29 15:34:29 发布

阅读量276

点赞数

文章标签： python html css java html5

Web开发人员可以使用很多CSS片段来获得某些结果，然后还有一些CSS技巧可以用于诸如垂直对齐内容或在图像上显示文本之类的事情。随着CSS成为一个不断发展的实体，我们一次又一次偶然发现有趣的酷CSS技巧。

在今天的帖子中，我将向您介绍另外10个您可能不知道CSS属性和技巧 。

有一个CSS属性叫做writing-mode ，它接受这三个值之一。 horizontal-tb ， vertical-rl和vertical-lr 。

然而， vertical-*值用于垂直块流，这会导致浏览器从上到下写入文本。在vertical-rl ，新的生产线将被添加到以前的左边，反之为vertical-lr 。

这对于显示通常从上到下书写的中文和日语之类的语言很有用，也适用于希望垂直显示文本以节省水平空间（如表格标题）的情况。

-webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;

关键字currentColor带有color属性的值，并且可以在其他接受color值的属性中使用，例如background 。

div{
     background: linear-gradient(90deg, currentColor 50%, black 50%);
     ...
     color: #FFD700;
     /* currentColor is #FFD700 */
  }

一个元素可以具有多个背景（一种背景颜色和多个背景图像）。 background-blend-mode按照给定的混合模式将所有这些混合在一起。目前共有16种混合模式。

background-blend-mode: difference;

mix-blend-mode混合重叠元素的内容和背景。即使Firefox支持，Chrome似乎也不支持所有模式。

mix-blend-mode: color;

我采用了两个元素，一个是img ，它显示了玫瑰的图像，另一个是带有图形背景的span ，将它们堆叠在一起，并应用了一些混合混合模式。

您可以通过使用一个称为pointer-events的单个属性来使元素忽略任何指针pointer-events 。通过为pointer-events在元素中赋予none值，可以防止其成为指针事件的目标。包括IE11 +支持。

在下面的演示中，两个堆叠在一起的图像下方有一个复选框。这两张图片都带有pointer-events: none ，允许我们单击隐藏在它们下面的复选框。根据复选框的选中状态，显示所需的图像，而其他图像则隐藏。

通常，在拆分框时（例如，当内联元素见证换行时），拆分部分的边缘没有任何框样式，并且看起来像是切片的。为了避免这种情况，您可以使用box-decoration-break:clone 。

现在通过一个示例和一个早期的“地平线上的圣诞节”提醒来跟进此事，以下是圣诞老人的驯鹿的列表，这些列表都在一个span输入！哈！哈！哈！

注意：即使现代IE确实支持box-decoration-break ，在分割部分边框的边缘，渲染也不平滑，背景看起来也被切片。但是它确实很好地渲染了box-shadow ，这就是为什么我在边框和背景上都使用了盒子阴影的原因。 IE中的边缘也没有水平填充，您可能想用空格填充。

visibility: collapse是仅为表格元素（如行和列）创建的属性。如果在其他任何地方使用，它的行为将类似于visibility: hidden 。 Chrome甚至将其视为hidden元素，即使对于表格元素也是如此。

当您分配visibility: collapse在表格元素上时，它是隐藏的，其空间被附近的内容填充-就像使用display:none行为一样。

但是，与display:none会在删除空格后修改表格布局不同，该布局的visibility:collapse保持不变。您可以在此处详细了解它的工作方式。

您可以使用columns属性为内容创建列布局。它使您可以指定要在元素中呈现多少列（ column-count ）以及如何呈现每个列宽度（ column-width ）。

如果内容不是文本（例如图像），则必须牢记其宽度与列的宽度相对应。对于以下示例，我仅使用column-count来指定所需的column-count 。

-webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;

可以使用CSS3属性resize使元素resize大小（垂直，水平或两者均可）。可以使用相同的功能禁用textarea的可调整大小。

resize: vertical;
resize: horizontal;
resize: both;
resize: none;

单个元素可以有多个CSS3渐变（线性和径向），并且可以将它们相互堆叠以创建图案。这使我们无需使用外部图像即可为元素创建漂亮的背景 。但是，使其工作可能需要一些实践。

翻译自: https://www.hongkiat.com/blog/css-tricks-more/

关注