Css 带HTML的圆角“；“可拖动的”；

我正在使用“draggable”属性，发现并不是所有浏览器在拖动元素时都以相同的方式呈现该元素。具体来说，背景色有时取自父元素（例如铬33），有时使用白色（例如Firefox 28）

此处的某些内容在拖动时应具有干净的圆角

添加

位置：相对到
。内部
修复了此问题，如下所示：

编辑：我根据下面Rutger的解决方案将其更新为包含
不透明度：0.999
：
更新的修复。痛苦在

希望这能帮助一些人。解决方案来自
react dnd
github

添加
转换：翻译（0,0）
到要作为预览拖动的节点。

JS中的CSS:
transform:'translate（0,0）

溶液来自。
这仍然在铬（71）中破碎。我发现这可以通过设置可拖动元素的不透明度来解决。如果不需要不透明度，可以设置
不透明度：0.999以修复此问题

解决方案：
对于图像，这在今天的Chrome中对我不起作用。我发现这对图像效果很好

以下是我今天使用的代码：

在css中：

.content {
  background: url('') top left no-repeat;
  overflow: hidden;
  opacity: 0.999;
  border-radius: 50%;
}  

在html中：

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div id="drag1" class="content" style="background:url('##POPULATED PROGRAMMATICALLY##');
   height:144px; width:144px;" draggable="true" ondragstart="drag(event)"> </div>
</div>


在发布问题之前，您应该让您的示例发挥作用。jQuery UI没有加载到您的小提琴中，因此问题不会显示在那里。@matthew:
draggable
属性不是jQueryUI属性，而是HTML5规范的一部分-支持它的浏览器允许几乎任何元素本机拖动：根本不需要jQuery。小提琴能用，是我的错。我不认为你可以在使用HTML5拖动元素时设置它们的样式。效果很好。但为什么？我怀疑这是webkit中的一个bug。大约一年前有一个类似的bug（）存档（现已修复），其中提到可拖动元素的边框无法按预期工作。@igor您找到解决方案了吗？@denski No:（@igor我在下面的回答中删除了一个修复。这个解决方案对我很有效，但我还必须移除
框阴影
，以移除底部角落的未环绕效果。