所以我有这四个向左浮动的框，每个框都有 50% 的页面宽度。我希望他们有一个轮廓1px solid gray，我想用 6px 圆角。我知道我可以使用border:1px solid gray;，border-radius:6px;但问题是边框增加了元素的宽度。因为盒子有 50% 的宽度，而且它们是向左浮动的，所以我不能给它们添加边框。那么是否可以使轮廓角变圆？
编辑：纯 CSS 解决方案是最好的，因为我需要支持除 IE6 之外的所有浏览器。
user1537415
问问题
14728 次
6 回答
7
您仍然可以使用box-sizing来处理边框。它包括元素总宽度中的边框宽度，并且得到了相当的支持。
于 2012-08-02T09:03:26.647 回答
0
我的想法未经测试，但是使用 50% 的 div 作为带边框的实际 div 的容器怎么样？
然后，bordered-div 具有heightand widthtoauto并设置它们的left, right, topand bottomto0px
于 2012-08-02T09:04:09.710 回答
0
根据这个答案有一个解决方法。但是您仍然必须设置outline:0和使用border-radius和/或box-shadow.
于 2012-08-02T09:05:14.250 回答
-2
使用以下 css 属性制作圆角边框
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border:1px solid gray;
如果你用这个。请发布您使用的一些代码。然后只有我们才能找到错误或任何修改需要......
谢谢
于 2012-08-02T09:03:16.177 回答
-2
控制边框的最佳方法是使用box-shadow。它保持圆角，可以在外部或内部（带有插图）。
例子：
box-shadow: 0px 0px 0px 2px black;
/*outside border black 2px width*/
box-shadow: 0px 0px 0px 2px black inset;
/*inside border black 2px width*/
于 2020-12-10T15:46:50.243 回答
-4
Another way to do this is to use the OUTLINE property as well as a BORDER-RADIUS of 80 pixels. Like followed:
outline: 5px #FFF;
border-radius: 80px;
This works for small images, not too large of ones. If you want to use the round edge system on larger images, you will have to do just as someone else stated and use the following code:
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
border-radius:0 0 10px 10px;
border:1px solid gray;
于 2013-10-12T10:36:12.640 回答