CSSBattle#2 Carrom

最新推荐文章于 2025-03-27 20:10:50 发布

Patrick_7396

最新推荐文章于 2025-03-27 20:10:50 发布

阅读量297

点赞数

分类专栏： CSSBattle练习文章标签： css3 css

本文链接：https://blog.csdn.net/apple_51191048/article/details/124091890

版权

CSSBattle练习专栏收录该内容

2 篇文章

订阅专栏

题目：

思路一：创建四个div，利用伪类选择器分别定位。
<div></div>
<div></div>
<div></div>
<div></div>
<style>
  body {
    background-color: #62374e;
  }
  div {
    width:50px;
    height: 50px;
    background-color:#fdc57b;
    position: absolute;
  }
  div:nth-child(odd) {
    left: 50px;
  }
  div:nth-child(even) {
    right: 50px;
  }
  div:nth-child(-n+2) {
    top: 50px;
  }
  div:nth-child(n+2) {
    bottom: 50px;
  }
>>相关知识链接：:nth-child - CSS（层叠样式表） | MDN:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。示例：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child>>扩展链接：CSS选择器之伪类选择器（元素） - nDos - 博客园

思路二：创建dashed边框然后使用clip-path进行剪裁。
<div></div>
<style>
  body {
    background-color: #62374e;
    margin:0 50px;
    border:dashed 50px #fdc57b;
    clip-path:inset(50px 0);
  }
</style>
>>相关知识链接：clip-path - CSS（层叠样式表） | MDNclip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path