0

在此处输入图像描述

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

      |
      |
-----   -------
      |
      |
4

6 回答 6

5

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

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

于 2013-05-27T15:11:30.377 回答
1

仅仅使用 CSS 边框属性来做这样的边框并不容易。你必须诉诸某种诡计来覆盖每个角落的边界。

你最好使用背景图像来完成这项任务。准备一张带有右线和底线的图像，并将其放在这些矩形的背景上，分别位于每个矩形的右下角。（显然你会准备好背景图片，这样那些灰线就不会在右下角相遇——就像你发布的图片一样。）

这是假设您对元素的宽度和高度有一个合理的了解，因此这不是一个完美的解决方案，但会让您非常接近。

于 2013-05-27T13:57:05.730 回答
0 
img { 
    border:solid rgb(165, 162, 162)
    border-top:none;
    }
于 2013-05-27T14:50:39.447 回答
0

我认为您应该为蒙版边框父 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

于 2013-05-27T15:03:49.273 回答
0

您可以在 css 中以最佳和简单的方式使用背景图像属性

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

于 2013-06-04T12:58:14.860 回答
-1

将背景图像设置到图像所在的 div 容器中。这个背景图像是白色的，并且有你想要的边界（右侧，底部）。我认为这是您问题的解决方案，否则边界看起来会有所不同

于 2013-05-27T13:52:27.703 回答