Question

假设我有border: 1 px solid black的图像，因为我希望它有边框。但是对于更多我想要圆角，所以我给border-radius: 10px。但现在看起来很糟糕，因为角落没有边框。是否有可能在html和css中做一些给角落边界的东西或答案可能在某些地方（例如）在jQuery中？

Answer 1

确保只是放置边框..并且在有背景颜色的地方你可以使用图像，但IE支持不会存在，但你可以尝试CSSPie进行增强。我认为也有些浏览器确实在图像上有圆角的问题，但是对整体支持或修复不太确定，或许将边框放在父div上然后将图像内部舍入可能会产生一个整洁的效果？

Example Fiddle

div, img {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #000;
    background: #0f0;
    width: 200px;
    margin: 50px;
    text-align: center;
    line-height: 40px;
}

HTML：

<div>rounded with border</div>
<img src="http://placekitten.com/100/100/" alt="">

更新：如果Webkit浏览器实际上是需要使用边框进行舍入的图像，那么它确实存在问题，这里有一个似乎有用的解决方法：

New Example Fiddle

（使用webkit查看第二张和第三张图片之间的区别）

HTML：

<div class="ri"><img src="http://placekitten.com/100/100/" alt=""></div>

CSS：

div {
   margin: 50px;
   text-align: center;
   line-height: 40px;
   width: 100px;
   height: 100px;
}

.ri {
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   -webkit-background-clip: padding-box;
   border: 1px solid #000;
}

.ri img {
   display: block;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   -webkit-background-clip: padding-box;
}

background-clip应该帮助背景剪辑到填充框，这理论上应该阻止background-image or color延伸到边框，但是它本身似乎不起作用好吧，所以我嵌套了图像，并将它和父div分开，然后将边框放到父div上，Webkit很高兴;）

Answer 2

您可以在Google代码上试用此curved-corner project，声称允许border-radius CSS属性跨浏览器工作。

Answer 3

你可以用css3＆amp;对于IE，您可以下载piecss3 js。

示例

div{
    width:200px;
    height:200px;
    background:red;
    color:#fff;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    border-radius:10px;
    border:2px solid yellow;
    behavior: url(PIE.htc);
}

检查一下 http://jsfiddle.net/sandeep/KDBGV/

Answer 4

其他方式是：

CSS：

.container {
  background:gray; 
  color:#fff; 
  margin:0 15px;
}
.rtop, .rbottom {
  display:block;
  background:#fff;
}
.crvtop *, .crvbottom {
  display: block;
  height: 1px;
  overflow: hidden;
  background:gray;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

HTML：

<div class="container">
   <b class="crvtop">
       <b class="r1"></b>
       <b class="r2"></b>
       <b class="r3"></b>
       <b class="r4"></b>
   </b>
   Place the content here
   <b class="crvbottom">
       <b class="r4"></b>
       <b class="r3"></b>
       <b class="r2"></b>
       <b class="r1"></b>
   </b>
</div>

这适用于所有浏览器。

欢呼和享受：）

Answer 5

Well Cris，这些类用于跨越元素以创建弯曲边缘。只需修改

.rtop, .rbottom {
  display:block;
  background:#fff;
}

.crvtop *, .crvbottom {
  display: block;
  height: 1px;
  overflow: hidden;
  background:gray;
}

与

.crvtop, .crvbottom {
  display:block;
  background:#fff;
}

.crvtop *, .crvbottom * {
  display: block;
  height: 1px;
  overflow: hidden;
  background:gray;
}

它会起作用

希望有所帮助..

有边界的角落 - 有可能吗？

5 个答案:

Example Fiddle

New Example Fiddle