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

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生成元素，因此添加和删除类.resizeStyles来附加样式对我来说是有意义的。