resize属性研究

浅浅的花香味﹌ 2022-08-10 03:43 232阅读 0赞

# **0. 目录** #

*  目录
 *  引言
 *  详览
    
     *  1 兼容性
     *  2 语法
     *  3 表现
 *  案例
 *  声明

# **1. 引言** #

resize属性是[CSS3 UI][]中的一个属性，允许用户调整元素的尺寸。今天通过一个图像对比案例来简要学习下。  
您可以到Codepen–**[预览案例][Link 1]**–，–**[玩弄代码][Link 2]**–。  
建议阅读时间6分钟。

# **2. 详览** #

resize是CSS3 UI的一部分，目前CSS3 UI处于CR（Candidate Recommendation，候选标准）阶段，`box-sizing`属性，`outline`属性，`text-overflow`属性和`cursor`属性都属于该CSS3 UI的定义范围。

## 2.1 兼容性 ##

来自[caniuse][]的兼容性表格如下，可以看出Firefox、Chrome、Safari、Opera等现代浏览器支持情况良好，遗憾的是IE和Edge不支持该属性。  
![resize属性兼容表][resize]

## 2.2 语法 ##

resize属性主要用来控制元素是否以及如何支持用户调整尺寸。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性名</th> 
   <th align="left">属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">属性名Name</td> 
   <td align="left">resize，允许用户控制元素大小</td> 
  </tr> 
  <tr> 
   <td align="left">属性值Value</td> 
   <td align="left">none 或 both 或 horizontal 或 vertical</td> 
  </tr> 
  <tr> 
   <td align="left">默认值Initial</td> 
   <td align="left">none</td> 
  </tr> 
  <tr> 
   <td align="left">适用范围Applies to</td> 
   <td align="left">设置过<code>overflow</code>属性且值不是<code>visible</code>的元素</td> 
  </tr> 
  <tr> 
   <td align="left">继承性Inherited</td> 
   <td align="left">no</td> 
  </tr> 
  <tr> 
   <td align="left">百分比Percentages</td> 
   <td align="left">N/A</td> 
  </tr> 
  <tr> 
   <td align="left">媒体类型Media</td> 
   <td align="left">visual</td> 
  </tr> 
  <tr> 
   <td align="left">计算值Computed value</td> 
   <td align="left">指定值specified value</td> 
  </tr> 
  <tr> 
   <td align="left">动画性Animatable</td> 
   <td align="left">不支持</td> 
  </tr> 
 </tbody> 
</table>

在可以接受的值中，不同的属性值有不同的含义

<table> 
 <thead> 
  <tr> 
   <th align="left">属性值</th> 
   <th align="left">属性值含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">none</td> 
   <td align="left">不允许用户控制元素大小</td> 
  </tr> 
  <tr> 
   <td align="left">both</td> 
   <td align="left">允许用户控制元素的宽和高</td> 
  </tr> 
  <tr> 
   <td align="left">horizontal</td> 
   <td align="left">允许用户控制元素的宽</td> 
  </tr> 
  <tr> 
   <td align="left">vertical</td> 
   <td align="left">允许用户控制元素的高</td> 
  </tr> 
 </tbody> 
</table>

注意：目前resize属性不适用于生成元素(伪对象生成元素)。

## 2.3 表现 ##

在不同的浏览下，设置过resize属性的元素的表现稍有不同。在firefox下表现如左图所示，在chrome、opera、safari下表现如右图所示。  
firefox ![这里写图片描述][20151109125357233] 其他浏览器![这里写图片描述][20151109125412697]

# **3. 案例** #

接下来通过一个图片对比的案例来演示resize属性的使用，案例效果如下。  
![这里写图片描述][20151109125723706]

在本案例中，我们用figure和div\#divisor分别设置背景图像，显示两幅图像，然后通过调整div\#divisor元素的宽度实现图像对比效果。

html代码如下，

css代码

div#comparison { width: 60vw; height: 60vw; max-width: 600px; max-height: 600px; overflow: hidden; }
    
    div#comparison figure { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg); background-size: cover; position: relative; font-size: 0; width: 100%; height: 100%; margin: 0; }
    
    div#comparison figure #divisor { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg); background-size: cover; position: absolute; min-width: 10%; max-width: 100%; box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 1); overflow: hidden; bottom: 0; height: 100%; /*设置resize属性，使之可以横向改变大小*/ resize: horizontal; }
    /*覆盖resize元素的默认样式*/
    div#comparison figure #divisor::after { content: ""; width: 20px; height: 30px; position: absolute; right: 1px; bottom: 1px; background: linear-gradient(-60deg, white 50%, transparent 0); cursor: ew-resize; -webkit-filter: drop-shadow(0 0 2px black); filter: drop-shadow(0 0 2px black); }

# **4. 声明** #

爱前端，乐分享。前端痴王海庆的博客，希望与您共同进步。  
博客之星评选正在进行，[投我一票][Link 3]，感谢您的支持。  
欢迎任何形式的转载，烦请注明装载，保留本段文字。  
本文原文链接[http://blog.csdn.net/whqet/article/details/49736187][http_blog.csdn.net_whqet_article_details_49736187]  
独立博客[http://whqet.github.io][http_whqet.github.io]  
新浪微博[http://weibo.com/FedFun][http_weibo.com_FedFun]  
极客头条[http://geek.csdn.net/user/publishlist/whqet][http_geek.csdn.net_user_publishlist_whqet]

[CSS3 UI]: http://www.w3.org/TR/css3-ui/
[Link 1]: http://codepen.io/whqet/full/pjxyaX/
[Link 2]: http://codepen.io/whqet/pen/pjxyaX/
[caniuse]: http://caniuse.com/#feat=css-resize
[resize]: /images/20220731/8dcc4d28c623478780b0f84d8ee89647.png
[20151109125357233]: https://img-blog.csdn.net/20151109125357233
[20151109125412697]: /images/20220731/d9c96d9ca1d84f0c9438b5d90a452717.png
[20151109125723706]: /images/20220731/c56441bc83a14c948cbf4aa1c110ef3c.png
[Link 3]: http://vote.blog.csdn.net/blogstar2015/candidate?username=whqet
[http_blog.csdn.net_whqet_article_details_49736187]: http://blog.csdn.net/whqet/article/details/49736187
[http_whqet.github.io]: http://whqet.github.io
[http_weibo.com_FedFun]: http://weibo.com/FedFun
[http_geek.csdn.net_user_publishlist_whqet]: http://geek.csdn.net/user/publishlist/whqet