时间戳

首页 > 解决方案 > 将边框半径属性应用于浏览器窗口？

javascript - 将边框半径属性应用于浏览器窗口？

问题描述

我正在做一个项目，客户给了我一个任务，让我在点击按钮时打开一个浏览器窗口，就像一个弹出窗口，但它不是一个弹出窗口，我必须打开一个浏览器窗口，这并不复杂，但他们给了我一个设计为浏览器窗口提供边框半径并使浏览器窗口的侧面像图像中一样弯曲。

在此处输入图像描述

我没有找到任何解决方案。可能吗？如果是，请回复我。提前致谢

标签： javascripthtmljquerycssvue.js

解决方案

答案：你不能做一个有弯曲角落的窗户

您必须重写浏览器代码才能这样做。

CSS 不适用于浏览器本身，仅适用于内容

但是你可以弹出一个弯曲的 div：

window.addEventListener("load", function() { // on page load
  document.getElementById("popBtn").addEventListener("click", function() {
    document.getElementById("popDiv").classList.toggle("hide");
  });
});
body {
  background-color: #CEEDDC
}

div.pop {
  width: 300px;
  height: 300px;
  padding: 10px;
  border: 2px solid #000;
  border-radius: 55px;
  -moz-border-radius: 15px;
  background-color: red;
  position: absolute;
  top: 100px;
  left: 200px;
}

.hide {
  display: none;
}
<button id="popBtn" type="button">Pop</button>
<div id="popDiv" class="pop hide">
  <h1>Here you could have an iFrame if needed</h1>
</div>

推荐阅读