使用 parents div (CSS) trim div（或任何元素）的方法
A way to trim div (or any element) with parents div (CSS)
有3个问题：
- 如何使黄色圆圈 (child div) 在穿过 parent 红色边框时被修剪，以便我只能看到黄色正方形？ （仅使用 CSS）
- 圆长大后如何以圆心固定？现在它固定在左上角。
- 如果我使用“position: fixed”然后声明top: 10px;左：10px；如何将 CSS 过渡添加到“顶部”和“左侧”属性？
.parent {
width: 200px;
height: 200px;
background-color: salmon;
border: 5px solid red;
}
.child {
width: 20px;
height: 20px;
background-color: yellow;
border: 2px solid blue;
border-radius: 50%;
}
.child:active {
width: 350px;
height: 350px;
transition: width 2s linear, height 2s linear;
}
<div class="parent">
<div class="child">
</div>
</div>
- 对父 div 使用
overflow: hidden。
- 如果您要修复的是子项，请将以下内容放在父项上。
display: grid 和 place-items: center。这是迄今为止使元素居中的最简单方法。
- 这个问题不是很清楚。
您当然可以添加“位置：固定”和“顶部：10px”； “左：10 像素”到任何 div。
如果你想在活动时对其进行动画处理，那么只需将不同的值添加到那些特定的 css 属性到你的 child:active class.
有3个问题：
- 如何使黄色圆圈 (child div) 在穿过 parent 红色边框时被修剪，以便我只能看到黄色正方形？ （仅使用 CSS）
- 圆长大后如何以圆心固定？现在它固定在左上角。
- 如果我使用“position: fixed”然后声明top: 10px;左：10px；如何将 CSS 过渡添加到“顶部”和“左侧”属性？
.parent {
width: 200px;
height: 200px;
background-color: salmon;
border: 5px solid red;
}
.child {
width: 20px;
height: 20px;
background-color: yellow;
border: 2px solid blue;
border-radius: 50%;
}
.child:active {
width: 350px;
height: 350px;
transition: width 2s linear, height 2s linear;
}
<div class="parent">
<div class="child">
</div>
</div>
- 对父 div 使用
overflow: hidden。 - 如果您要修复的是子项，请将以下内容放在父项上。
display: grid和place-items: center。这是迄今为止使元素居中的最简单方法。 - 这个问题不是很清楚。 您当然可以添加“位置：固定”和“顶部：10px”； “左：10 像素”到任何 div。 如果你想在活动时对其进行动画处理，那么只需将不同的值添加到那些特定的 css 属性到你的 child:active class.