css 如何实施圆形边界？

ct3nt3jp 于 12个月前发布在其他

关注(0)|答案(2)|浏览(121)

我一直在我的图像旁边创建这个“票证状”边框，并让border-bottom工作得很好（见下图）。

的数据
有必要（我认为）实现边界与：：后伪类，由于边界必须有偏移量。这是目前工作的底部边界的代码：

#imagePanel .panel {
  background-color: #28c3d7;
  position: relative;
  text-align: center;
  height: 100%;
  padding-bottom: 80px;
}
#imagePanel .panel > div:first-child:after {
  position: relative;
  display: block;
  width: 100%;
  height: 22px;
  margin-top: -11px;
  content: '';
  border-top: 22px dotted #fff;
  z-index: 2;
}

个字符
问题是，如何在图像的右侧应用相同的边框？一旦页面宽度超过某个点，这将非常重要，因为我必须使用媒体查询操作样式，并将图像放在左侧，将蓝色背景的其他内容放在右侧。

css

来源：https://stackoverflow.com/questions/58914484/how-to-implement-a-circular-border

2条答案

按热度按时间

jutyujz01#

这是一个具有多重背景的想法

.box {
  position:relative;
  display:inline-block;
}
.box:after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:50px;
  padding-top:10px; /* same as the radius */
  box-sizing:border-box;
  background:
    radial-gradient(circle 10px /*10px of radius*/,blue 98%,transparent 100%) 
    -10px 0 /* Control the initial position*/
    /40px 20px /* 40px to control the distance between the circles, 20px = 2*10px */ 
    repeat-x,
    blue content-box;
}

img {
 display:block;
}

个字符
你可以很容易地在左边或右边做：

.box {
  position:relative;
  display:inline-block;
}
.box:after {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:50px;
  padding-right:10px;
  box-sizing:border-box;
  background:
    radial-gradient(circle 10px,blue 98%,transparent 100%) 
    100% -10px
    /20px 40px 
    repeat-y,
    blue content-box;
}

img {
 display:block;
}

<div class="box"><img alt="image" src="https://via.placeholder.com/365x204" ></div>

的字符串
您还可以添加CSS变量来轻松控制一切：

.box {
  position:relative;
  display:inline-block;
  --r:10px; /* Radius */
  --d:10px; /* Distance between circles*/
  --h:50px; /* Height of the border */
  --c:blue; /* Color */
}
.box.left:after,
.box.right:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--h);
  padding-right:var(--r);
  box-sizing:border-box;
  background:
    radial-gradient(circle var(--r),var(--c) 98%,transparent 100%) 
    100% calc(-1*var(--d)/2)
    /calc(2*var(--r)) calc(2*var(--r) + var(--d)) 
    repeat-y,
    var(--c) content-box;
}
.box.right:after {
  left:auto;
  right:0;
  transform:scaleX(-1);
}

.box.bottom:after,
.box.top:after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:var(--h);
  padding-top:var(--r);
  box-sizing:border-box;
  background:
    radial-gradient(circle var(--r),var(--c) 98%,transparent 100%) 
    calc(-1*var(--d)/2) 0
    /calc(2*var(--r) + var(--d)) calc(2*var(--r))  
    repeat-x,
    var(--c) content-box;
}

.box.top:after {
  bottom:auto;
  top:0;
  transform:scaleY(-1);
}

img {
 display:block;
}

<div class="box left">
<img alt="image" src="https://via.placeholder.com/200x200" >
</div>

<div class="box right" style="--r:20px;--d:30px;--c:red;">
<img alt="image" src="https://via.placeholder.com/200x200" >
</div>

<div class="box bottom" style="--r:5px;--h:60px;--d:10px;--c:green;">
<img alt="image" src="https://via.placeholder.com/200x200" >
</div>
<div class="box top" style="--r:25px;--h:40px;--d:10px;--c:yellow;">
<img alt="image" src="https://via.placeholder.com/200x200" >
</div>

的字符串

的数据
如果你想自动计算距离，以避免有部分圆，你可以尝试下面的地方，你必须定义圆的数量。

.box {
  position:relative;
  display:inline-block;
  --r:10px; /* Radius */
  --n:8; /* number of circles*/
  --h:50px; /* Height of the border */
  --c:blue; /* Color */
  
  --d: calc((100% - var(--n)*2*var(--r))/(var(--n) - 1)); /* the distance*/ 
}
.box.left:after,
.box.right:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--h);
  padding-right:var(--r);
  box-sizing:border-box;
  background:
    radial-gradient(circle var(--r) at 50% var(--r),var(--c) 98%,transparent 100%) 
    100% 0
    /calc(2*var(--r)) calc(2*var(--r) + var(--d)) 
    repeat-y,
    var(--c) content-box;
}
.box.right:after {
  left:auto;
  right:0;
  transform:scaleX(-1);
}

.box.bottom:after,
.box.top:after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:var(--h);
  padding-top:var(--r);
  box-sizing:border-box;
  background:
    radial-gradient(circle var(--r) at var(--r) 50% ,var(--c) 98%,transparent 100%) 
    0 0
    /calc(2*var(--r) + var(--d)) calc(2*var(--r))  
    repeat-x,
    var(--c) content-box;
}

.box.top:after {
  bottom:auto;
  top:0;
  transform:scaleY(-1);
}

img {
 display:block;
}

<div class="box left">
<img alt="image" src="https://via.placeholder.com/200x200" >
</div>

<div class="box right" style="--r:20px;--n:4;--c:red;">
<img alt="image" src="https://via.placeholder.com/200x200" >
</div>

<div class="box bottom" style="--r:5px;--h:60px;--n:10;--c:green;">
<img alt="image" src="https://via.placeholder.com/200x200" >
</div>
<div class="box top" style="--r:25px;--h:40px;--n:3;--c:yellow;">
<img alt="image" src="https://via.placeholder.com/200x200" >
</div>

的
下面是一个codepen的代码

赞(0）回复(0）举报 12个月前

mrfwxfqh2#

试着这样
中文（简体）

#imagePanel .panel {
  background-color: #28c3d7;
  position: relative;
  text-align: center;
  height: 100%;
  padding-bottom: 80px;
}
#imagePanel .panel > div:first-child:after {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  margin-top: -11px;
  content: '';
  border-top: 22px dotted #fff;
  z-index: 2;
  position: absolute;
bottom: 0;
left: 0;
}

字符串

赞(0）回复(0）举报 12个月前

我来回答

css 如何实施圆形边界？

2条答案

相关问题

热门标签

最新问答