堆栈内存溢出
  简体   繁体   English

边界半径未创建圆形边界

[英]Border-Radius is not creating Rounded Border

 原文  2019-07-06 11:24:00  6   3    html/ css/ frontend/ border

问题描述

I have a image picture card. 我有一张图片图片卡。 I would like to have rounded border around the whole card. 我想在整张卡片上加上圆角边框。 How would I do conduct this? 我该怎么做？ It does not seem to be working property. 它似乎不是工作财产。

Does anyone know the property in CSS or HTML? 有人知道CSS或HTML中的属性吗？ The following did not work after doing border-radius property:. 在执行border-radius属性后，以下内容不起作用： I would like to do it around the card image, instead of the images. 我想在卡片图像而不是图像周围做。 We have a 3X3 square gallery, or 4X4 gallery soon, so maybe more difficult to code. 我们即将有一个3X3方形画廊或4X4画廊，因此可能很难编码。

I want the actual images rounded off, not a rounded box 我希望将实际图像四舍五入，而不是四舍五入 

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 个解决方案

解决方案1
 1  2019-07-06 11:55:21

Add Padding in .card class, because inner content over-righting the border radius 在.card类中添加填充，因为内部内容超出了边框半径 

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

Updated Code: 更新的代码： 

<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>

解决方案2
 0  2019-07-06 12:28:29

You can see like this just make a few changes like this, Click and see my result 您可以看到像这样进行一些更改， 单击并查看我的结果

Create CSS class imgsize and imgfirst like below, And delete all the styles in HTML file your three images. 创建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;
 }

Then edit "card" and "card-header" class in CSS, 然后在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;
}

解决方案3
 0 已采纳  2019-07-07 11:42:03

Will implement the 将实施 

overflow:hidden on the container

as Paulie D recommended. 如Paulie D推荐的那样。 Paulie D is free to recopy into his own answer, so I can send points. Paulie D可以随意将其复制到自己的答案中，这样我就可以发送积分。

Thanks, 谢谢，

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 圆形边框，无边框半径 - Rounded border without border-radius 为Bootstrap 4表创建border-radius边框 - Creating a border with border-radius for Bootstrap 4 tables 如何使用CSS获得带有边界半径的部分圆角边框？ - How to get a partial rounded border with border-radius using CSS? CSS：创建具有边界半径的时钟 - CSS: Creating a clock with border-radius 使用border-radius创建自定义形状 - Creating a custom shape with border-radius 使用`border-radius`创建一个圆 - Creating a circle using `border-radius` 边框半径（如果边框上有图像） - border-radius if there is an image on the border 具有边界半径但没有边界的 DIV - DIV with border-radius but no border 边界半径和图像 - BORDER-RADIUS AND IMAGE 带分割的边界半径 - Border-radius with division
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM