边界半径未创建圆形边界

时间：2019-07-06 11:24:00

标签： html css frontend border

我有一张图像照片卡。我想在整张卡片上加上圆角边框。我该怎么做？它似乎不是工作财产。

有人知道CSS或HTML中的属性吗？ 在执行border-radius属性后，以下内容不起作用： 我想在卡片图像而不是图像周围做。我们即将推出3X3方形画廊或4X4画廊，因此编码起来可能会更加困难。

我希望将实际图像四舍五入，而不是四舍五入的盒子

border-radius: 25px;


.card {
    border-color: black;
    border-radius: 25px;
    border-style: solid;
    border-width: 1px;
    width: 100%;
    margin-right: 0;
    padding: 0;

}

.card-header {
    background-color: white;
}

.card-body {
    background-color: white;
}


.cardcheckbox {
    position: absolute;
    right: 5px;
    top: 5px;
    /*vertical-align: middle;
    float: right;*/
    visibility: hidden;
}


input[type=checkbox]:checked {
    visibility: visible;
}

.card:hover .cardcheckbox {
    visibility: visible;
}


.material-icons {
    display: inline-flex;
    vertical-align: top;
}

.card-header .accordion-toggle {
    &.collapsed:after {
        font-family: 'Material Icons';
        content: "\e5cf";
    }

    &:after {
        font-family: 'Material Icons';
        content: "\e5ce";
        float: right;
        color: grey;
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="card" style="width: 30.00rem">
   <div aria-multiselectable="true" class="accordian md-accordion" id="accordionEx" role="tablist">
      <div class="grid-container" id="gridid531937b3b9b54801ab80573cf91d0852" style="  display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: repeat(1, 1fr);
         grid-gap: 0em;
         padding: 0px;
         align-items: stretch;
         position: relative; "><input class="cardcheckbox" id="checkid" type="checkbox"><img id="imgid531937b3b9b54801ab80573cf91d08520" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image" style="max-width: 100%; max-height: 100%; padding: 0px; background-color: white;"><img id="imgid531937b3b9b54801ab80573cf91d08521" src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7" style="max-width: 100%; max-height: 100%; padding: 0px; background-color: white;"><img id="imgid531937b3b9b54801ab80573cf91d08522" src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png" style="max-width: 100%; max-height: 100%; padding: 0px; background-color: white;"></div>
      <div class="card-header" id="headingOne1" role="tab"><a aria-controls="id531937b3b9b54801ab80573cf91d0852" aria-expanded="true" class="accordion-toggle collapsed" data-parent="#accordionEx" data-toggle="collapse" href="#id531937b3b9b54801ab80573cf91d0852">Tree</a></div>
      <div aria-labelledby="headingOne1" class="collapse" data-parent="#accordionEx" id="id531937b3b9b54801ab80573cf91d0852" role="tabpanel">
         <div class="card-body">Tree with leaves</div>
      </div>
   </div>
</div>

3 个答案:

答案 0 :(得分：1)

在.card类中添加填充，因为内部内容超出了边框半径

.card {
    border-color: black;
    border-radius: 25px;
    border-style: solid;
    border-width: 1px;
    width: 100%;
    margin-right: 0;
    padding: 10px;
}

更新代码：

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
    .card {
        border-color: black;
        border-radius: 25px;
        border-style: solid;
        border-width: 1px;
        width: 100%;
        margin-right: 0;
        padding: 10px;

    }

    .card-header {
        background-color: white;
    }

    .card-body {
        background-color: white;
    }


    .cardcheckbox {
        position: absolute;
        right: 5px;
        top: 5px;
        /*vertical-align: middle;
    float: right;*/
        visibility: hidden;
    }


    input[type=checkbox]:checked {
        visibility: visible;
    }

    .card:hover .cardcheckbox {
        visibility: visible;
    }


    .material-icons {
        display: inline-flex;
        vertical-align: top;
    }

    .card-header .accordion-toggle {
        &.collapsed:after {
            font-family: 'Material Icons';
            content: "\e5cf";
        }

        &:after {
            font-family: 'Material Icons';
            content: "\e5ce";
            float: right;
            color: grey;
        }
    }
</style>
<div class="card" style="width: 30.00rem">
    <div aria-multiselectable="true" class="accordian md-accordion" id="accordionEx" role="tablist">
        <div class="grid-container" id="gridid531937b3b9b54801ab80573cf91d0852" style="  display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(1, 1fr);
        grid-gap: 0em;
        padding: 0px;
        align-items: stretch;
        position: relative; "><input class="cardcheckbox" id="checkid" type="checkbox"><img
                id="imgid531937b3b9b54801ab80573cf91d08520"
                src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image"
                style="max-width: 100%; max-height: 100%; padding: 0px; background-color: white;"><img
                id="imgid531937b3b9b54801ab80573cf91d08521"
                src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7"
                style="max-width: 100%; max-height: 100%; padding: 0px; background-color: white;"><img
                id="imgid531937b3b9b54801ab80573cf91d08522"
                src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png"
                style="max-width: 100%; max-height: 100%; padding: 0px; background-color: white;"></div>
        <div class="card-header" id="headingOne1" role="tab"><a aria-controls="id531937b3b9b54801ab80573cf91d0852"
                aria-expanded="true" class="accordion-toggle collapsed" data-parent="#accordionEx"
                data-toggle="collapse" href="#id531937b3b9b54801ab80573cf91d0852">Tree</a></div>
        <div aria-labelledby="headingOne1" class="collapse" data-parent="#accordionEx"
            id="id531937b3b9b54801ab80573cf91d0852" role="tabpanel">
            <div class="card-body">Tree with leaves</div>
        </div>
    </div>
</div>

答案 1 :(得分：0)

您可以看到像这样Click and see my result

创建CSS类imgsize和imgfirst，如下所示，然后删除HTML文件中的所有样式作为您的三个图像。

<img class="imgfirst" id="imgid531937b3b9b54801ab80573cf91d08520" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image">
<img class="imgsize" id="imgid531937b3b9b54801ab80573cf91d08521" src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
<img class="imgsize" id="imgid531937b3b9b54801ab80573cf91d08522" src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png" >

.imgsize{
     width: 100px;
     height: 100px;
     padding-top: 12px;
}
.imgfirst{
   width: 100px;
   height: 100px;
   padding-top: 12px;
   padding-left: 12px;
 }

然后在CSS中编辑“ card”和“ card-header”类，

.card {
   margin-top: 10px;
   margin-left: 10px;
   border-color: black;
   border-radius: 10px;
   border-style: solid;
   border-width: 1px;
   width: 100%;
   margin-right: 0;
   padding: 0;
}

.card-header {
   margin-left: 10px;
   margin-right: 10px;
   background-color: white;
}

答案 2 :(得分：0)

将实施

exports.updateComment = (req, res) => {
  let comment = req.body.comment;

  Post.findByIdAndUpdate(req.body.postId, {
    $pull: { comments: { _id: comment._id } }
  }).exec((err, result) => {
    if (err) return res.status(400).json({ error: err });

    Post.findByIdAndUpdate(
      req.body.postId,
      { $push: { comments: comment, updated: new Date() } },
      { new: true }
    )
      .populate("comments.postedBy", "_id name")
      .populate("postedBy", "_id name")
      .exec((err, result) => {
        if (err) {
          return res.status(400).json({
            error: err
          });
        } else {
          res.json(result);
        }
      });
  });

如Paulie D所推荐。 保利D可以自由地复制到自己的答案中，这样我就可以发送积分。

谢谢

相关问题
最新问题