快看！10个不错的CSS实用小技巧「分享」

1. 在输入框中添加placeholder内容

为了让用户了解输入框所需要的内容，我们可以使用placeholder进行说明，这样用户就可以清晰地知道输入什么内容比较合适。实现方法如下：

input[type="text"]::placeholder {

  color: #999;
  font-style: italic;
}

其中，::placeholder是占位符伪类选择器。在样式文件中，你可以对其展开相应的样式，并指定占位符文本后该怎么显示。

实例解析

::placeholder 占位符伪类选择器可由不同标签使用，这里我们针对一个文本输入框来讲解。我们可以使用这个选择器来添加placeholder内容，指定颜色和字体风格。在这里，我们将文本设置为<em>斜体</em>，并用浅灰色字体渲染了下文本输入框的占位符文本。

2. 使用自定义字体

现在，许多站点都使用自定义图标来进行设计，对于设计师来说这种方式非常方便。其实，这也适用于字体。我们可以使用自己的字体来强调特定的文本，而不必使用另一种字体文件。实现方法如下：

@font-face {

  font-family: 'Custom-Font';
  src: url('font.ttf');
}
.custom-font {
  font-family: 'Custom-Font', Arial, sans-serif;
}

这里，改变了自定义字体的<em>字体家族</em>和<em>字体源</em>。请确保你在font-face规则中正确地定义字体家族和包含字体文件的路径。接下来，在样式中，我们将<em>.custom-font</em>类应用到需要使用自定义字体的元素上。

实例解析

font-face 引入一个自定义字体。我们为字体创建了一个新的名字"Custom-Font"，并将字体文件（这里命名为“font.ttf”）链接到它上面。要在网站上使用新字体，你需要将其“安装”或引用到你的样式表中。下一步，我们使用新的类(.custom-font)来应用新字体到文本上。如果满足您的需求，更新字号和字体颜色即可。

3. 使用多行文本截断

在“卡片”模式的展示一些浏览器列表和其他页面元素中，需要基于显示行数或元素高度对文本进行截断。这可以通过以下样式来实现：

.card-text {

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

在上面的示例中，使用CSS3的 FLEX模型进行多行文本截断的实现。可以使用 Webkit 的属性，但需要考虑到兼容性问题，-webkit-box-sizing 属性可以计算容器的宽度和高度，防止内容溢出。其次，使用<em>-webkit-line-clamp</em>修改其中一行的大小为容器大小并截断。最后，使用overflow方法在元素超出边界时隐藏多余内容，并通过CSS3动画效果逐渐移除部分文本。

实例解析

在以上样式中，display: -webkit-box（WebKit 布局模型）将多行文本放入一个实际上是单行的容器中，这意味着文本将按照最合适的字符串自动展开。我们使用<em>-webkit-line-clamp: 4</em>将卡片文本限制为四行。并且加上了<em>overflow:hidden</em>，它可以通过CSS3动画效果逐渐移除部分文本。

4. 暗色背景上的链接变为深灰色

与透明度结合使用，可以快速创建像“黑白”主题和其他暗色模式的网站。若文本不是深灰色，就可以使用以下的代码来修复链接的颜色：

a {

  color: #ddd;
}
a:hover {
  color: #fff;
}

以上代码将链接的默认颜色设置为灰色，并且当鼠标悬停在链接上时，将文本高亮显示为白色，使连接在深色背景上更显眼。

实例解析

在这里，我们使用<em>color: #ddd</em>来定义链接文字的颜色，这会使链接文本与暗色背景产生一定的反差，让用户能够看到网站重点文本的连接。再使用<em>color: #fff</em>来在鼠标悬停时为文本提供高亮效果，为文本添加动态可读性。

5. 不产生空格的inline-block元素

当使用<em>inline-block</em>展示菜单、文本图标等像元素时，CSS留在纯文本中的内容可能会形成空间，而这看起来就像是分裂在三个字符（例如，尝试在CSS中去除菜单项目之间留下的空格）。下面来解决这个问题：

ul.menu li,

button {
  display: inline-block;
  *display: inline;
  zoom: 1;
  vertical-align: middle;
}

在以上样式中，我们使用了*评级和<em>IE专用zoom</em> CSS属性，通过这些技术，可以确保行内块的适当对齐，可以避免分裂标签产生的问题。针对样式文件中的小图标和按钮，将使用以上样式。

实例解析

在这里，我们使用内联块级元素展示小图标和按钮等元素。为确保元素对齐，我们使用了<em>vertical-align</em> 属性，并将值设置为<em>middle</em>。接下来，使用IE技巧来确保适当地对齐行内块，并避免在浏览器中产生意外的留白问题。

6. 使用CSS实现动态背景

如何使您的网站更具趣味性？<em>动画背景效果</em>是一个好的方式。下面展示如何使用CSS创建旋转背景。这看起来很可爱，因此对于博客和其他具有视觉吸引力的网站非常有用。

@keyframes spin {

  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.spin-bg {
  background: linear-gradient(to right, #f3e5f5, #b2dfdb);
  background-size: 400% 400%;
  animation: spin 6s infinite linear;
}

以上代码中，利用<em>@keyframes</em>创建一个名叫“spin”的动画，在动画中定义了0％和100％之间的旋转角度。下一步，使用<em>.spin-bg</em>类，为背景添加CSS渐变色和 相应的background-size，以及调用动画，这样就能实现背景的旋转动画。

实例解析

在这里，我们使用CSS创建一个旋转背景。首先，我们在@ keyframes规则中定义了旋转动画（将一个元素从左转到右）。利用渐变颜色和background-size将 元素设置为一个宽度和高度，设定为<em>400%</em>，这样我们就会有一个双倍于正常宽度和高度的矩形元素。接下来，可以使用CSS <em>animation</em>属性来引用旋转动画，及设置它的播放周期。关键之处在于将旋转动画固定为无限循环而不是从一端运动到另一端。

7. ARIA标记用于可访问性

在构建具有可访问性的站点时，ARIA标记非常有用。例如，您可以使用下面的代码来提供页面内容的辅助数据。

  
Tab 1

  Here is some information related to Tab 1.

这样可以通过<em>aria-labelledby</em>标签关联在页面中其他位置定义的一个或多个导航标签名。设置了<em>role</em>来让屏幕阅读器在切换时能够较好地处理此导航。

实例解析

在上述示例中，我们使用<em>role</em>为被阅读元件的</em>元素设置了角色为“tabpanel”。结合<em>aria-labelledby</em>进行他与多个元素的关联，这能让可访问的内容突出显示，支持屏幕阅读器突出显示页面中的导航和信息，并提高页面功能的可用性。

8. CSS实现全屏背景

现在，许多站点都使用全屏背景样式来增加视觉冲击力。下面是使用CSS3以及一些特殊技巧来实现全屏背景的代码。

body {

  height: 100vh;
  background: url(bg-image.jpg) no-repeat center center fixed;
  background-size: cover;
}

在本例中，CSS<em> vh </em> (viewport height)单位，使元素的高度相等于视口的高度，即浏览器窗口的高度。我们使用了<em>background</em> CSS属性来使用指定图片，而后使用<em>no-repeat</em>，<em>center center</em>，<em>fixed</em>和<em>cover</em>属性来控制背景如何呈现。

实例解析

在以上样式中，我们首先使用<em>height: 100vh</em>来设置网站背景。然后利用<em>background：</em>属性将背景图像添加到CSS中。特殊的操作是：<em>no-repeat center center</em>将背景图像居中显示并强制其不重复。然后使用<em>cover</em>属性来调整背景大小，以便它完全覆盖浏览器窗口。

9. 使用CSS实现响应式图像

与响应式网络（RWD）的流行趋势不同，响应式图像通常意味着根据屏幕大小调整图像大小。在这里，展示如何使用CSS来实现响应式图片。

img {

  max-width: 100%;
  height: auto;
}

在以上代码中，使用<em>max-width: 100％</em>调整图像的最大宽度，并使用<em>height: auto</em>计算图像的高度，使其比例保持原有效果。

实例解析

在这里，我们使用CSS的<em>max-width</em>属性来调整元素的最大宽度，这个在不使用图片尺寸的情况下非常重要。然后使用<em>height：auto</em>的组合，在浏览器缩放时保持图片的正确比例。

10. 使用Flexbox进行元素对齐

CSS3布局方法的一种是Flexbox。这是一种使用灵活的子元素流和灵活的容器尺寸等原则来完成对齐的方法。下面试一下文章左右两侧的对齐方式。

  
很长的文本内容

  

    语言1
    语言2
  

.wrap {

  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content {
  flex-basis: 500px;
}
.sidebar {
  margin-left: 20px;
}

在代码中，它使用<em>align-items:center</em>将元素在主轴上居中对齐，同时使用<em>justify-content:space-between</em>在侧轴上对齐两个元素，可以将22像单位的距离放置在这个类的左右两端。

实例解析

在上述例子中，我们创建了一个包装并显示两个元素一旁内容和一些菜单项。首先，我们使用<em>display:flex</em>属性将所有元素包装在子元素流布局中。使用<em>align-items:center</em>将元素在主轴上居中对齐，同时为<em>justify-content:space-between</em>在侧轴上对齐两个元素，这样可以放置一些空白并将所有子元素放置在这个类的左右两端。