将边界半径添加到离子行中的一列答案

【问题标题】：Adding border-radius to one column in ionic row将边界半径添加到离子行中的一列
【发布时间】：2019-10-01 04:02:05
【问题描述】：

在离子视图中我有这样的东西

<div>
  <div class="row">
    <div class="col col-80" style="background-color: lightgrey;border: 1px solid;border-radius: 15px;">Row 1</div>
    <div class="col" style="text-align: center;"><a class="icon ion-edit"></a></div>
  </div>
  <div class="row">
    <div class="col col-80" style="background-color: lightgrey;border: 1px solid;border-radius: 15px;">Row 2</div>
    <div class="col" style="text-align: center;"><a class="icon ion-edit"></a></div>
  </div>
</div>

我想要的是第一列具有背景颜色，并且整个列周围只有一个边框，并且该边框具有边框半径。显然，当前代码将在每一行周围设置一个单独的边框，这不是我想要的。有没有办法让它成为一个边界？

【问题讨论】：

标签： html css angularjs border ionic

【解决方案1】：

是的，你可以使用这样的东西：

<div>
  <div class="row">
    <div class="col col-80" style="background-color: lightgrey;border: 1px solid;border-top-left-radius: 15px;">Row 1</div>
    <div class="col" style="text-align: center;"><a class="icon ion-edit"></a></div>
  </div>
  <div class="row">
    <div class="col col-80" style="background-color: lightgrey;border: 1px solid;border-bottom-left-radius: 10px;">Row 2</div>
    <div class="col" style="text-align: center;"><a class="icon ion-edit"></a></div>
  </div>
</div>

https://jsfiddle.net/fu0gxgvt/

如果我理解你的问题。

【讨论】：