我想在图像周围创建一个带圆角的彩色粗边框。它看起来像这样:
如何使用HTML和CSS执行此操作?
答案 0 :(得分:1)
以下内容......
img {
border:2px solid black;
border-radius:10px;
}
将其修改为最适合您的方式。
答案 1 :(得分:1)
您可以使用它,它肯定会按您的要求运作。
img {
border: 13px solid blue;
border-radius: 10px;
}
答案 2 :(得分:1)
如何在CSS
和HTML
中执行此操作:
<强> CSS:强>
.ImageBorder
{
border-width: 5px;
border-color: Blue;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
<强> HTML:强>
<img src="MyImage.gif" class="ImageBorder" />
答案 3 :(得分:1)
您可以将img
放在包装器div中,然后给出border-radius值以创建圆角边框。通过这种技术,图像也将显示为圆角。
.image-wrap {
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
}
.image-wrap:after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 3px #1b1b1b;
-wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.image-wrap img {
vertical-align: bottom;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
这是工作演示。 http://jsbin.com/jicikalo/1/edit