css 想做一个框，四周有背景色（带透明度），中间透明

想用css做一个框，四周有背景色（带透明度），中间透明。我可以使用手指拖动四个角，放大缩小这个框。框.png
请教这个框的样式应该怎么做？主要是框与屏幕边之间的带透明度的背景色，不知道怎么做。### 问题描述

问题出现的环境背景及自己尝试过哪些方法

你期待的结果是什么？实际看到的错误信息又是什么？

阅读 10.6k

需求拆解成三部分

① 样式
样式的，楼上给了很多种方法，题主自己去尝试，千千万万种，至少这个样式不是难度。
rgba实现透明度，四个角的border如何解决，网上一搜有一堆，勤动手。https://segmentfault.com/q/10...
四楼的box-shadow方法最优。

② 拖动
③ 缩放

拖动缩放的找一个插件去做，动手搜一搜就可以了，如果要用于移动端，就找适配移动端的插件。
https://segmentfault.com/q/10...

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

测试地址：
代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 缩放（Resizable） - 动画</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
  <style>
  #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');}
  </style>
  <script>
  $(function() {
    $( "#resizable" ).draggable()
    $( "#resizable" ).resizable();
  });
  </script>
</head>
<body>
    <div class='mask'>
<div id="resizable" class="ui-widget-content">
 
</div>
 </div>
 
</body>
</html>

css 想做一个框，四周有背景色（带透明度），中间透明

问题出现的环境背景及自己尝试过哪些方法

相关代码

你期待的结果是什么？实际看到的错误信息又是什么？

你尚未登录，登录后可以

如何自定义设置虚线边框的样式？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

为什么这个动画一直在抖动?

怎么把一个矩形div变成一个直角三角形？

如何实现前端视频流的处理和优化？

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

我看到很多网站，都会对CSS初始化：`margin: 0; padding: 0;` ，目的是什么呢？

css 想做一个框，四周有背景色（带透明度），中间透明

问题出现的环境背景及自己尝试过哪些方法

相关代码

你期待的结果是什么？实际看到的错误信息又是什么？

你尚未登录，登录后可以

如何自定义设置虚线边框的样式？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

为什么这个动画一直在抖动?

怎么把一个矩形div变成一个直角三角形？

如何实现 前端视频流的处理 和优化？

通栏banner图片，如何不变形且内容完全显示不裁剪啊？

我看到很多网站，都会对CSS初始化：`margin: 0; padding: 0;` ，目的是什么呢？

如何实现前端视频流的处理和优化？