[英]Border-Radius is not creating Rounded 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&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>
在.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&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>
您可以看到像这样进行一些更改, 单击并查看我的结果
创建CSS类imgsize和imgfirst,如下所示,然后删除HTML文件中的所有样式作为您的三个图像。
<img class="imgfirst" id="imgid531937b3b9b54801ab80573cf91d08520" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&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;
}
将实施
overflow:hidden on the container
如Paulie D推荐的那样。 Paulie D可以随意将其复制到自己的答案中,这样我就可以发送积分。
谢谢,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.