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

Question

我试图创建一个类似于Adobe 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生成元素的，所以我添加＆amp;删除类.resizeStyles以将样式附加到。