&nbs p;
一、众所周知的
众所周知，文本域( textarea )在FireFox或Chrome浏览器下，右下角有个可以拖拽的标志。
有人保留，有人嫌碍事，直接 resize:none; 掉，但是，估计没人利用整个儿做交互效果。
二、纯 CSS 的交互展示
您可以狠狠地点击这里：textarea resize下的纯CSS交互demo
例如，拖动（往右→）下图圈中的图标：
一个 半 透明遮罩层随着拖动把照片给覆盖了，达到了半遮面的交互效果。
效果没什么，但是却完全CSS实现的，就有 意思 了。
三、 实现原理
我们平时拖动 文本域 的时候，往右拖则文本域 宽 度往右侧扩展。但是，如果文本域右侧定位（浮动或绝对定位），则右侧不动，宽度往左侧扩展。下图演示为右100像素绝对定位：
我们还 知道 ， textarea resize 的时候宽度变化会让具有“包裹性”的父元素宽度跟着一起变化，所以，如果我们把 textarea 放在具有半透明背景色的层中，那拉伸的时候，这个半透明层不就可以拉拉伸伸，有了交互效果啦！这就是demo中半透明层覆盖来覆盖去的原理。
说得再多也不容易明白，demo中一些障眼的属性（ overflow:hidden; 、 opac IT y:0; ）去掉，你就知道大概了。下图为去掉 overflow:hidden; 以及文本域 opacity 设为 0.6 后的效果：
四、结束语
经测试， opera /FireFox/Ch rom e浏览器支持，IE10以及下面的喽喽们都不支持。显然，兼容性是硬伤。因此，除了一些特殊情况，此实现没有多少实用 价值 。仅供大家娱乐，仅供大家参考。当然，您可以发挥你智慧实现其他一些交互。
唉，忧伤的三月，就这些，感谢阅读！
参考 文章 ：Tricky Textarea Pulltab
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-有意思：textarea resize属性下纯CSS交互效果 全部内容，希望文章能够帮你解决 html5教程-有意思：textarea resize属性下纯CSS交互效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-有意思：textarea resize属性下纯CSS交互效果的详细内容...