如何设置（css）边框宽度？

Question

我想设置像图片一样的实线边框宽度。我能做什么？谢谢你的回答

      |
      |
-----   -------
      |
      |

Answer 1

如果将border-radius应用于父容器，则可以直观地实现此结果。

子容器需要具有纯色背景（与包装元素的背景相匹配）。像这样：http://jsfiddle.net/skip405/JgsKM/

Answer 2

仅使用CSS边框属性来制作这样的边框并不容易。你不得不采取某种诡计来覆盖每个角落的边界。

最好使用背景图像完成此任务。使用右边和底部线准备图像，并将其放置在每个矩形的背景上，这些矩形位于每个矩形的右下方。 （显然你会准备背景图像，以便那些灰色线条不会在右下角相遇 - 就像你发布的图像一样。）

这假设你对元素的宽度和高度有一个很好的了解，所以它不是一个完美的解决方案，但会让你非常接近。

Answer 3

img { 
    border:solid rgb(165, 162, 162)
    border-top:none;
    }

Answer 4

我认为你应该为掩码边界父div 添加 4个子div。

HTML

<ul class="list">
<li>
<div id="holder"> <!--parent div--> 
   <div id="maskTopLeft"></div> <!-- child 1 for mask border on top-left --> 
   <div id="maskTopRight"></div> <!-- child 2 for mask border on top-right --> 
   <div id="maskBottomLeft"></div> <!-- child 3 for mask border on bottom-left --> 
   <div id="maskBottomRight"></div> <!-- child 4 for mask border on bottom-right --> 
</div>
</li>
</ul>

CSS

#main { width:100%; margin:10px; }

.list {
margin: 0px;
padding: 0px;
list-style-type: none;
position: relative;
}
.list li {
  float:left;
  margin-right: -0.5px;
  margin-top: -0.5px;
}
.list li:first-child #holder {
  border-right: 0.5px solid #000;
}
.list li:last-child #holder {
  border-left: 0.5px solid #000;
}
#holder {
    border: 1px solid #000;
    height: 250px;
    width: 200px;
    position:relative;
}

#maskTopLeft {
    position: absolute;
    top:-1px;
    left:-1px;
    width:21px;
    height:20px;
    background-color:#fff;
}

#maskTopRight {
    position: absolute;
    top:-1px;
    left:180px;
    width:21px;
    height:20px;
    background-color:#fff;
}

#maskBottomRight {
    position: absolute;
    top:230px;
    left:180px;
    width:21px;
    height:21px;
    background-color:#fff;
}

#maskBottomLeft {
    position: absolute;
    top:230px;
    left:-1px;
    width:21px;
    height:21px;
    background-color:#fff;
}

的 demo on cssdeck

Answer 5

您可以在css中使用背景图像属性，这是最简单的方法

http://www.w3schools.com/cssref/pr_background-image.asp

Answer 6

将背景图像设置到图像所在的div容器中。此背景图像为白色，并且可以根据需要设置边框（右侧，底部）。我认为这是你的问题的解决方案，因为否则边框将看起来不同