有哪些CSS属性不常用却hen实用？

嘿，老铁，咱这儿说说CSS 那些你可Neng没怎么用过但绝对Neng让你的页面geng上一层楼的家伙。别kan它们不起眼，关键时刻Neng派上大用场，你懂的。

hen多人知道 Grid 的 gap，但 Flexbox 也支持哦。是不是有点意外？其实挺方便的，直接设置元素之间的间距，省去了hen多 margin 的麻烦。想想就觉得爽！

.swipe-card {
  touch-action: pan-y; /* 只允许垂直滚动，禁止水平默认行为 */}

这个属性特别好玩！它Neng控制滚动条的“吸附”效果。比如 iOS 上的橡皮筋效果或者 Android 上的发光效果。想让模态框或者其他元素滚动的时候感觉geng丝滑？就用它！

.custom-checkbox {
  appearance: none; /* 清除默认样式 */
  width: 20px;
  height: 20px;
  border: 2px solid #;}

想让你的页面有轮播图或者分页效果？不用写 JavaScript 了！直接用 CSS 的 scroll-snap-* 属性就行。简单粗暴，效率高！

.flex-list {
  display: flex;
  gap: 20px; /* 无需 margin hack */}

这个属性对数字显示样式控制得特别好。比如财务报表、代码展示等等，让数字排版geng规范、geng美观。相信我，用了就回不去的！哈哈。

p {
  hyphens: auto;
  word-wrap: break-word;}

嗯…这个属性有点特别。它控制代码块中 Tab 字符的宽度。不过要注意的是兼容性不太好哦。目前 IE 不支持，FF 也只是实验性支持……所以用的时候要小心点儿。说实话，这玩意儿有点小众了。不过要是Neng用上它…那也挺不错的嘛！咳咳…… 我也不知道为啥这么啰嗦……不对不对，应该是…这玩意儿还处于草案阶段呢。

.resizable-panel {
  resize: horizontal;
  overflow: auto;}

控制文本是否Ke以被选中啊！简单来说就是防止用户复制内容或者允许用户复制内容啦 。根据你的需求来设置就好啦~

.video-container {
  aspect-ratio: / ;   /*比例*/   width: %;}

解决了 z-index 不协调的问题！想象一下复杂的布局里面层叠的东西总是乱套怎么办？ 用 isolation Ke以创建一个新的层叠上下文，把它们隔离起来嘛~

.float-image {
  float: left;
  shape-outside: circle; /* 文字沿圆形环绕 */
  clip-path: circle;}

像素艺术爱好者们的Zui爱了! 这个属性Ke以控制图片缩放算法,保证缩放后的图片依然保持像素风格,而不是变得模糊不清!

.price {
  fontVariantNumeric: tabularNumbers; /* 等宽数字,列对齐 */    /* 或者 oldStyleNumbers 用于正文的旧式数字 */ } 

hyphens
自动断字功Neng! 当文本太长无法在一行显示时,它Ke以自动在合适的字符之间断开一行,使文本geng易于阅读 。需要配合 `lang` 属性使用哦~
clipPath
比简单的 `borderRadius` geng强大的裁剪功Neng! Ke以创建各种复杂的形状来裁剪元素的内容,创造出独特的视觉效果
 .avatar { clipPath : polygon ; /* 六边形 */    /* 或 circle  圆形 */} 

shapeOutside
让文本环绕不规则形状! 通常配合 float 使用 , Ke以实现文字沿着圆圈或其他形状排列的效果
 

writingMode
垂直排版是它的专长! Ru果你需要Zuo一些传统中文或日文的页面布局 , 这个属性就非常有用啦
 pre { tabSize : ; /* 个空格宽度 */} 

textRendering
优化文本渲染性Neng,牺牲一点点清晰度换取渲染速度 。 对于需要大量文本显示的页面来说 , 这个属性是个不错的选择


 





 . 布局与盒模型
aspectRatio
强制元素保持固定宽高比 ,避免图片变形的情况出现 。 非常适合用来实现各种图片轮播和图库功Neng
touchAction
控制触摸屏上的默认手势 ,例如缩放和滚动 ,Ke以大大提升移动端体验
 

appearance`
移除浏览器默认样式 ,Ke以自定义表单控件的外观 ,例如按钮、输入框等

resize`
允许用户调整元素大小,比如 textarea 和其他可调整大小的元素
### contain
性Neng优化利器!告诉浏览器该元素独立于文档流 ，减少重绘范围
.
 

.实用工具属性
### all
一键重置所有样式 !快速清除元素的各种样式 ,方便调试和reset设计
.
.视觉效果
### mixBlendMode
创建 Photoshop 一级的混合模式效果 ! Ke以实现各种炫酷的光影效果
.
### backdropFilter
毛玻璃效果  !给背景添加一层柔焦滤镜 ，营造出朦胧的美感
建议尝试的组合技：
控制输入框光标颜色 ，与品牌色保持一致
.