实用但少用的 CSS 样式：::-Webkit-Input-Placeholder 与 @Import 技巧-东山笔记

前端领域的CSS，被视为魔法棒，每日皆有众多开发者凭借其构建丰富多彩的网页。然而，您了解其中隐藏的独特设计与技术窍门么？本文将揭示那些罕为人知的CSS样式及其在紧要关头的应用。

::-Input-伪元素的妙用

您是否曾遇见过无法更改输入框内字体颜色的困境？实际上，这是因为您中了CSS的一个小陷阱。不过无需紧张，方法十分简单明了——仅需运用::-input-placeholder伪元素即可解决此难题。该功能虽鲜为人知，但在特定情境下确实能成为您的得力助手。同时，为了取得更好的效果，建议您与其他属性结合使用。

@Import：嵌套样式表的小秘密

在某些情况下，我们需要在CSS文件内部嵌套另一个或多个样式表。此时，@import语句便能发挥其作用。尽管此方法并不建议频繁使用以防性能受影响，但在处理Web应用的个别组件时却可提供一定的便利性，帮助我们有效利用空间。

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

点击Input元素时的状态线

在用户点击input元素后，系统可能生成一条带有特效的状态线。尽管其出发点着眼于向用户传达当前情境，然而在某些情况下，它的美学效果未能满足设计要求。在此种情况下，您可选择去除该状态线或自定义其外观，以期更为符合我们的审美观。

@import url("reset.css");
@import url("global.css");  
@import url("font.css");

设置元素是否可编辑

移动设备上视频播放以全屏为默认设定，然而有些情况下需将其纳入页面中进行播放。那么只需设定left和right均为0，便可消除边距，从而获取精确对齐位置且实现居中展示。

清除浮动，解决父类高度崩塌

div {
    outline: none; //移动浏览器默认的状态线
    // outline: 5px dotted red; 也可以设置样式
}

常见的父类高度塌陷问题往往由浮动元素引发，对此，我们可利用clear属性轻松应对。此为一简便而实用的布局技巧，虽看似简单，实则功效显著。

可编辑

禁止用户选中文本

在某些UI布局中，我们可能需要限制用户选定文本内容。此时，”user-select:none”属性功能强大，便于实现此目的。这一技术虽并不常见，但在特定情境下对提高用户体验大有裨益。

清除手机Tap事件后的高亮

在手机操控过程中,打击某特定元素时会产生亮色提示痕迹，破坏视觉美感。通过设置标签属性-webkit-tap-highlight-color为transparent，即可消退此亮痕，实现界面整洁。

::-Thumb：修改滚动条样式

div {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

滚动条的外观直接关系到整个网页的美感。运用::-webkit-scrollbar-thumb属性，便能自定义滚动条风格，更好地满足设计要求。这种技术虽不常被提及，但对于渴望实现精美设计的人们来说，其具有至关重要的作用。

移除浏览器默认样式

.clearfix {
	zoom: 1;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
 }

各大浏览器均具备自身设定的默认样式，这在实现跨浏览器兼容性时存在一定困扰。而通过运用CSS重置技术将能去除这些默认样式，以确保网页在各种浏览器中的视觉效果保持一致。

div {
    user-select: none; /* Standard syntax */
}

CSS开启硬件加速

若CSS动画或过渡引发页面闪烁问题，不妨尝试启动处理器硬件加速解决。借助transforms:translateZ(0)或will-change:transform，可使浏览器采用GPU技术进行渲染，从而提高响应速度及流畅度。

*{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

“-webkit-Touch-Callout”:禁用长按弹出菜单功能。

在手持设备上，通过长按页面中的链接或图像，常出现一个不必要的操作菜单。利用-webkit-touch-callout:none属性可以消除此菜单，从而提高用户的操作效率和满意度。

让元素支持3D

施行3D效果，需运用transform-style:preserve-3d，使项目元素在三维空间内展示。此方法虽非常见，却为构建3D效果之基础设定，至关重要。

Css实现不换行、自动换行、强制换行

在排版过程中，我们常需对文字换行进行精确操控。white-space:nowrap禁用自动换行；word-wrap:break-word启用自动换行功能；而word-break:break-all则强制换行。

input, button, textarea, select {
	*font-size: 100%;
	-webkit-appearance:none;
}

Box-Sizing：包含宽度和高度

在进行版面设计时，需保证元素的宽高包括内边距及边框。而应用box-sizing:border-box可达到此目的，虽是简单技巧，却有助于提高我们的工作效率。

-webkit-transform: translateZ(0);

Calc()：计算属性值

针对页面宽度动态计算元素宽度时，可借助calc()函数达到此目的，例如将元素宽度设置为百分比值-100px，该方式尤其适用于响应式设计。

-webkit-backface-visibility: hidden;

Css3线性渐变

复杂的页面设计需借助渐变效果以增添其感染力。linear-gradient()函数是创建线性渐变的实用工具，尽管非普遍应用，然而在设定背景或按钮样式时颇具价值。

常用的选择器：:Nth-Child()

-webkit-touch-callout: none;

在选择特定元素的子节点时，:nth-child（）的灵活运用可发挥显著优势。此便捷方法虽基础，然在处理复杂列表或表格问题时，其高效性则尤为显现。

至此简要概述，未来持续更新。如若发现优秀的CSS代码，敬请于评论区分享，携手共建丰富共享资源库。

div {
    -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(60deg);
    transform-style: preserve-3d;
}