html div圆形透明边框,css 想做一个框，四周有背景色（带透明度），中间透明

需求拆解成三部分

① 样式

样式的，楼上给了很多种方法，题主自己去尝试，千千万万种，至少这个样式不是难度。

rgba实现透明度，四个角的border如何解决，网上一搜有一堆，勤动手。https://segmentfault.com/q/10...

四楼的box-shadow方法最优。

② 拖动

③ 缩放

拖动缩放的找一个插件去做，动手搜一搜就可以了，如果要用于移动端，就找适配移动端的插件。

https://segmentfault.com/q/10...

一分钟随手写一个demo，看看效果

测试地址：

代码：

jQuery UI 缩放(Resizable) - 动画

#resizable { width: 150px; height: 150px; padding: 0.5em;

background:rgba(255,255,255,0);

z-index:99;

box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);

background: linear-gradient(to left, #fff, #fff) left top no-repeat,

linear-gradient(to bottom, #fff, #fff) left top no-repeat,

linear-gradient(to left, #fff, #fff) right top no-repeat,

linear-gradient(to bottom, #fff, #fff) right top no-repeat,

linear-gradient(to left, #fff, #fff) left bottom no-repeat,

linear-gradient(to bottom, #fff, #fff) left bottom no-repeat,

linear-gradient(to left, #fff, #fff) right bottom no-repeat,

linear-gradient(to left, #fff, #fff) right bottom no-repeat;

background-size: 6px 20px, 20px 6px, 6px 20px, 20px 6px;

}

#resizable h3 { text-align: center; margin: 0; }

.ui-resizable-helper { border: 1px dotted gray; }

/**

.mask { position:fixed; width:100%;height:100%;background:rgba(0,0,0,0.5) }

**/

body { background: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3606910914,1579853926&fm=26&gp=0.jpg');}

$(function() {

$( "#resizable" ).draggable()

$( "#resizable" ).resizable();

});