• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • resize

    版本:CSS3

    resize CSS 属性允许你控制一个元素的可调整大小性。

    示例

    /* keyword values */
    resize: none;
    resize: both;
    resize: horizontal;
    resize: vertical;
    resize: block;
    resize: inline;
    
    /* global values */
    resize: inherit;
    resize: initial;
    resize: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE浏览器不支持resize,其余浏览器都支持resize

    语法:

    resize:none | both | horizontal | vertical

    取值

    • none:元素不能被用户缩放。
    • both:允许用户在水平和垂直方向上调整元素的大小。
    • horizontal:允许用户在水平方向上调整元素的大小。
    • vertical:允许用户在垂直方向上调整元素的大小。
    Note:如果一个block元素的overflow属性被设置成了visible,那么resize属性对该元素无效。

    例子

    <textarea>元素在Gecko2.0(Firefox 4)中默认是可以进行缩放的。你可以通过下面的CSS代码来重写这种行为:

    textarea.example {
     resize: none; /* disables resizability */
    }
    
    //html
    <textarea class="example">type some text here.</textarea>
    

    可以使用resize属性使任何元素都可以调整大小。

    //CSS
    
    .resizable {
      resize: both;
      overflow: scroll;
      border: 1px solid black;
    }
    
    div {
      height: 300px;
      width: 300px;
    }
    
    p {
      height: 200px;
      width: 200px;
    }
    
    //html
    
    <div class="resizable">
      <p class="resizable">
        this paragraph is resizable, because the css resize property is set to 'both' on this
        element.
     </p>
    </div>
    

    This paragraph is resizable, because the CSS resize property is set to 'both' on this element.

    上篇:zoom

    下篇:pointer-events