小编VXp*_*VXp的帖子

我正在尝试采用复杂的路径形状并将其用作 css 中的剪辑路径蒙版，但我不知道如何让剪辑蒙版“填充”父容器。相反，它只是被切断或不会扩展以填充可用空间。

如果我添加clipPathUnits="objectBoundingBox"它根本不会出现。

<svg viewBox="0 0 720 720">
  <defs>
    <clipPath id="map">
      <path d="M568.421 326.842L511.579 270v37.895h-18.947v-18.948h-56.843v37.895l18.948 37.894v18.948h-18.948l37.896 56.842h-37.896l-18.947-18.948v-18.947h-37.895L360 383.684h-18.947l-18.948-37.894v-37.895L360 270l37.895-37.895-18.948-37.895H360v18.948l-18.947-18.948h-18.948v37.895h-37.894l-56.843-18.947-37.894-56.842h-56.842l-18.947-18.948-75.79 75.79v37.895h18.947v75.789L37.895 345.79l5.532 48.163 32.362 46.573 113.685 37.895 94.737 18.947h94.736v-18.947h37.895l18.947 37.895h18.948v56.842l56.842-37.894v-37.896h37.895l18.947-37.894v-37.896l56.842-37.894V345.79l-18.948-18.948z"/><path d="M246.315 194.21h56.843v-18.947l-18.947-37.895h-18.948v37.895h-18.948zM227.368 137.368h18.947v-18.947h-37.894V156.316h18.947zM341.053 175.263h56.842l37.894 37.895-18.947 18.947V270h75.79v-18.947h-37.895v-18.948h37.895V194.21h-37.895l-56.842-56.842h-56.842zM265.263 99.474h18.948v18.947h-18.948zM284.211 61.579h18.947v18.948h-18.947zM303.158 108.947h18.947v18.947h-18.947zM341.053 99.474h37.895v18.947h-37.895zM227.368 80.526h18.947v18.947h-18.947zM378.947 80.526V4.737H360l-37.895 37.894v18.948l18.948 18.947zM587.368 440.526h37.895v37.895h-37.895zM663.158 364.736V345.79h-18.947V402.631l56.842-18.947v-18.948zM378.947 270h18.947v18.947h-18.947zM644.211 421.578h18.947v18.948h-18.947zM644.211 459.474h18.947v18.947h-18.947z"/>
    </clipPath>
  </defs>
</svg>

https://codepen.io/picard102/pen/aEwJzR

我尝试构建一个 CSS 网格，其中一些条目嵌套在 div 结构中：

像这样它的工作原理：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-template-rows: 1;
}

.cent {
  grid-column: 2;
  grid-row: 1;
}

.left {
  grid-column: 1;
  grid-row: 1;
}

.right {
  grid-column: 3;
  grid-row: 1;
}

<div class="wrapper">
  <div class="cent">center</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

但是如果我开始嵌套我的结构，我将无法访问我想要的列：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-template-rows: 1;
}

.cent {
  grid-column: 2;
  grid-row: 1;
}

.left {
  grid-column: 1;
  grid-row: 1;
}

.right {
  grid-column: 3;
  grid-row: …

我想<span>在下面的代码片段中的元素之间有一个可视边框,管道或其他分隔符.麻烦的是,当它们流入新线时,我最终会在线的开头出现一个边框.如果元素在同一行上,我怎么能在元素之间应用某种边界？我完全愿意改变标记或采取另一种方法,但是我已经尝试了很多从flexbox到浮动的东西到目前为止没有成功.

规定:

• 我不想为此使用javascript.
• span内容是动态的,因此媒体查询将无法工作,因为我无法知道元素的宽度或它们可能会中断的位置.

这甚至可能吗？我已经看过这个类似的问题,但那里的答案要么使用js,要么使用媒体查询.

下面的代码片段是一个基本的例子,我将跨度放在一个可调整大小的div中,只是为了演示较小宽度的流问题.

.resizable {
  resize: horizontal;
  overflow: scroll;
  border: 1px solid black;
  height: 95vh;
  box-sizing: border-box;
  min-width: 120px;
  max-width: 100%;
  padding: 10px;
}

span {
  font-size: 18px;
  font-family: sans-serif;
}

span+span {
  margin-left: 10px;
  border-left: 2px solid #aaa;
  padding-left: 10px;
  display: inline-block;
}

<div class="resizable">
  <span>dog</span><span>cat</span><span>elephant</span><span>potato</span><span>boston clam chowder</span>
</div>

我希望在CSS元素上实现这些方面：

这是我最近得到的（需要边界）：

div { 
  width: 120px;
  height: 100px;
  margin: 25px auto;
  border: 1px solid #000;
  border-top-left-radius: 200px 300%;
  border-bottom-left-radius: 200px 300%;
  border-top-right-radius: 200px 300%;
  border-bottom-right-radius: 200px 300%;
}

<div></div>

关于如何锐化边缘有什么建议吗？宽度需要可变。

有人可以帮我弄清楚为什么以下CSS Grid示例无法按预期工作吗？这是Codepen的链接：

.cards {
  margin: 0;
  padding: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  grid-template-areas:
    "a a b"
    "c d d"
    "c e e";
}

.card {
  background-color: #1E88E5;
  padding: 2em;
  color: #FFFFFF;
  line-height: 1.4;
  border-radius: 4px;
}

.card1 { grid-area: "a"; }
.card2 { grid-area: "b"; background-color: #4CAF50; }
.card3 { grid-area: "c"; background-color: #FFCA28; }
.card4 { grid-area: "d"; background-color: #F06292; }
.card5 { grid-area: "e"; background-color: #FF8A80; }

由于某种原因，网格区域的结构不正确。可能我忘记了一些东西，但我无法弄清楚到底是什么。任何帮助表示赞赏。谢谢！

在不改变HTML的情况下,我怎么只选择CSS的无序列表的父级？

我有以下内容:

<div class="content">
  <ul class="navigation">
    <li><a href="#">Item 1</a>
      <ul>
        <li><a href="#">Sub Item A</a></li>
        <li><a href="#">Sub Item B</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a></li>
  </ul>
</div>

我只需要抓取第1项来改变它的CSS.我尝试过这样的事情:ul li a - 无法工作,因为它会抓住第2项

1. ul li a - 将无法工作,因为它将获取第2项
2. ul.navigation li - 将无法工作,因为它将获取第2项
3. ul:first-child - 无法工作,因为它会触及Item 1和Sub Item A.

有什么想法吗？

如何让输入框垂直居中对齐？我尝试将 vertical-align: "middle" 添加到几个地方，但没有取得任何成功。我觉得 flexbox 是这里问题的一部分？

.container {
  /* Flex Properties */
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

.item {
  background-color: orange;
}

label {
  width: 100px;
  display: inline-block;
}

<div class="container">
  <div class="item">
    <label>Gee my iefwaf fwats: </label>
    <input>
  </div>
</div>

在这样的场景中，我希望能够通过顶部 div 单击背景 div（红色），同时仍然能够单击顶部 div 的子级（蓝色和绿色）。

function bgclick() {
  console.log('Background Is Clicked!');
}

function topclick() {
  console.log('Top Is Clicked!');
}

#background {
  background-color: #f33;
  width: 250px;
  height: 250px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

#top {
  width: 250px;
  height: 250px;
  position: fixed;
  top: 0;
  left: 0;
}

.children {
  width: 50px;
  height: 50px;
  position: relative;
}

<div id="background" onclick="bgclick()"></div>
<div id="top">
  <div class="children" onclick="topclick()" style="background-color:#3f3"></div>
  <div class="children" onclick="topclick()" style="background-color:#33f"></div>
</div>

我玩过pointer-events: none。这只会使一个可点击，而另一个则不可点击。我怎样才能做到这样我可以点击红色的并收到一条消息，以及蓝色和绿色的消息？

我有下面的代码，我正在尝试将图像旋转 360 度。但旋转会摇晃。

.pully {
  position: absolute;
  right: 3.7em;
  bottom: 1em;
  z-index: 11;
  animation-name: clockwiseSpinner;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

.line {
  position: absolute;
  right: 145px;
  bottom: 10px;
  height: 200px;
  border-right: 2px solid red;
}

@-webkit-keyframes clockwiseSpinner {
  from {-webkit-transform: rotate(0deg)}
  to {-webkit-transform: rotate(360deg)}
}

<div class="line"></div>
<img class="pully" src="https://s8.postimg.cc/vax8le4x1/p-pully.png" alt="">

JSFiddle

知道如何消除这种不稳定吗？

我在网上看过使用这个运算符的代码,我不知道它应该是什么意思:

var div1  =$  ('#div1');
var div2  =$  ('#div2');
var div3  =$  ('#div3');

它会返回带有相应ID的元素,但为什么呢？它是如何工作的并且是原生的吗？