我试图创建类似于 Adobe Illustrator 在调整元素大小或移动元素时的外观。关于如何仅通过 CSS 实现这一点,我无法找到有用的资源。
最佳答案
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
以附加样式对我来说是有意义的。
关于css - 如何使元素看起来可调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32959429/