header 条 CSS 中的透明圆圈

Question

基本上我想通过固定的 header 栏看到圆圈 Cut-Out 这样我就可以在滚动时看到容器中的内容。

CSS:

.container {
    width: 960px;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
    background: grey;
}
p {
    font-family: arial;
}
li {
    font-family: arial;
}
#page-header {
    display: inline-block;
    position: fixed;
    width: 100%;
    height: 50px;
    background: orange;
}
#clip {
    background: white;
    opacity: 0.5;
    width: 100%;
    height: 50px;
    -webkit-clip-path: circle(10px);
}

Answer 1

您可以通过在 .header 上附加一个 :before 伪元素来使用 box-shadow 而不是使用 clip-path 来实现这一点。

body {
  margin: 0;
  background: gray;
}
.header {
  position: fixed;
  width: 100%;
  height: 50px;
  overflow: hidden;
}
.header:before {
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  background: transparent;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin-top: -5px;
  margin-left: -5px;
  box-shadow: 0 0 0 5000px orange;
}

<div class="header"></div>

如果您真的想使用 clip-path，我建议您使用 svg 的 clipPath 以获得最大的浏览器支持。

body, html {
  margin: 0;
  height: 100%;
  background: gray;
}

<svg width="100%" height="50" preserveAspectRatio="none" viewBox="0 0 700 50">
  <defs>
    <clipPath id="c">
      <path d="M0,0 h700 v50 h-700 v-50 M345,25 a5,5 0 1,0 10,0 a5,5 0 1,0 -10,0" />
    </clipPath>
  </defs>
  <path d="M0,0 h700 v50 h-700z" fill="orange" clip-path="url(#c)" />
</svg>

header 条 CSS 中的透明圆圈

Transparent Circle in header bar CSS

html

css

webkit

fixed