css - 如何使元素看起来可调整大小

Question

我试图创建类似于 Adob​​e Illustrator 在调整元素大小或移动元素时的外观。关于如何仅通过 CSS 实现这一点，我无法找到有用的资源。

Answer 1

JSFiddle

HTML:

<div id='input_container' class='resizeStyles'>
  <label>Label:</label>
  <input type='text' />
</div>

CSS:

#input_container{position:relative; outline:#333 dashed 2px;}

.resizeStyles:before, .resizeStyles:after{
    content:'';
    position:absolute;
    width:100%;
    height:6px;
    border-width:6px;
    border-style:none dotted;
    border-color:#333;
}
.resizeStyles:before{top:-4px; left:-6px;}
.resizeStyles:after{bottom:-4px; right:-6px;}

注意:我通过 jQuery 生成元素，因此添加和删除类 .resizeStyles 以附加样式对我来说是有意义的。