我一直在尝试使用几个嵌套的div来扩展/投影边框，我在下面有一个工作示例。
基本上，我想要实现的是垂直和水平边框，它们扩展到包含内容的盒子之外。有点像起草的外观。如果可能的话，我希望这能完全响应。
在我的代码中，我设置了具有负边距的高度，以便获得我在视觉上寻找的效果，但似乎我的标记对于我想要做的事情而言太过臃肿。 响应水平，但垂直我只是隐藏溢出。
这样做的另一个想法就是有4个div，每个边界侧（顶部，右侧，底部，左侧）1，然后将每个div偏移一定量以达到效果。有点像＆＃34; jiggled＆＃34; div集群。 4个div将由父容器携带并响应。
这可以比我在小提琴中做的更简单吗？有没有办法让它在垂直和水平方面都是灵活的（完全响应）？是否可以在每个边界侧设置可变扩展（例如，一侧为2px，另一侧为4px）？
没有进一步的废话，这是我到目前为止所拥有的：
NSDictionary *dict = [[NSDictionary alloc] initWithObjectsAndKeys:@"contact_name", @"kumar",@"designantion",@"sales", nil];
NSDictionary *finalDict = [[NSDictionary alloc] initWithObjectsAndKeys:dict, @"OfficeContactPerson", nil];
NSURL *url=[NSURL URLWithString:@"http://139.59.252.34:1337/office"];
NSData *postData=[[[NSString alloc]initWithData:[NSJSONSerialization dataWithJSONObject:finalDict options:NSJSONWritingPrettyPrinted error:nil] encoding:NSUTF8StringEncoding] dataUsingEncoding:NSUTF8StringEncoding allowLossyConversion:YES];
NSString *postlength=[NSString stringWithFormat:@"%lu",(unsigned long)[postData length]];
NSMutableURLRequest *request= [[NSMutableURLRequest alloc]init];
[request setURL:url];
[request setHTTPMethod:@"POST"];
[request setValue:postlength forHTTPHeaderField:@"Content-Length"];
[request setValue:@"application/json" forHTTPHeaderField:@"Content-Type"];
[request setValue:@"application/x-www-form-urlencoded" forHTTPHeaderField:@"Content-Type"];
[request setHTTPBody:postData];
NSError *error=[[NSError alloc]init];
NSHTTPURLResponse *response=nil;
NSData *urlData=[NSURLConnection sendSynchronousRequest:request returningResponse:&response error:&error];
if (!urlData){
UIAlertView *alert =[[UIAlertView alloc]initWithTitle:@"Error"message:[NSString stringWithFormat:@"%ld",(long)(error.code)]
delegate:nil
cancelButtonTitle:@"OK"
otherButtonTitles:nil];
[alert show];
}
else
{
NSString *responseData=[[NSString alloc]initWithData:urlData encoding:NSUTF8StringEncoding];
NSLog(@"Response data ----->%@",responseData);
NSError *error=nil;
NSDictionary *jsonData=[NSJSONSerialization JSONObjectWithData:urlData options:NSJSONReadingMutableContainers error:&error];
}
body {
margin: 0;
padding: 0;
width: 100%;
font-family: Helvetica, Arial, sans-serif;
/* text-align: center; */
}
.container {
margin: 50px auto 0;
padding: 0;
width: 75%;
height: 200px;
position: relative;
}
.box-vert {
margin: -10px 0;
padding: 0;
overflow: visible;
height: 200px;
position: absolute;
border: 1px solid #C5C5C5;
border-top: none;
border-bottom: none;
}
.box-horz {
height: 180px;
margin: 10px -10px;
overflow: visible;
border: 1px solid #C5C5C5;
border-left: none;
border-right: none;
padding: 0;
}
.box-inner {
margin: 0 10px;
padding: 20px;
background-color: #ECECEC;
height: 140px;
float: left;
overflow: hidden;
}
.box-inner h1 {
margin: 0 0 10px;
text-transform: uppercase;
font-weight: 200;
letter-spacing: 3px;
font-size: 30px;
color: #009688;
}
.box-inner p {
margin: 0;
line-height: 1.4;
font-size: 14px;
color: #666;
}
答案 0 :(得分：8)
您可以使用单个元素和背景渐变来完成此操作，如下面的代码段所示。输出是响应式的（正如您在整页视图中看到的那样），并且可以根据内容的大小自行调整。
这种方法有点复杂，因为它是用一个元素完成的，所以这里有一个解释：
background-size设置为100% 1px background-size设置为1px 100%。calc函数用于定位它们。background-color，因为它会填满整个div（超出边界）。我们甚至无法使用背景剪辑，因为这也会剪切边框。因此，我们必须再次使用线性渐变，其尺寸小于容器的尺寸，所有侧面的填充量。因此，此渐变的背景大小为calc(100% - 20px) calc(100% - 20px)，位置也应相应偏移。
div {
padding: 15px;
margin-bottom: 10px;
line-height: 1.4;
font-size: 14px;
color: #666;
background: linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#ECECEC, #ECECEC);
background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%, calc(100% - 20px) calc(100% - 20px);
background-position: 0px 10px, calc(100% - 10px) 0px, 0px calc(100% - 10px), 10px 0px, 10px 10px;
background-repeat: no-repeat;
}
/* Just for demo */
h1 {
margin: 0 0 10px;
text-transform: uppercase;
font-weight: 200;
letter-spacing: 3px;
font-size: 30px;
color: #009688;
}
body {
margin: 0;
padding: 0;
width: 100%;
font-family: Helvetica, Arial, sans-serif;
/* text-align: center; */
}<div>
<h1>Title Text here</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div>
<h1>Title Text here</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.</div>
如果您需要每侧的变量扩展，只需根据以下逻辑更改填充，背景大小和位置：
让我们假设你需要边框在顶部延伸6px，在右边延伸8px，在底部延伸10px，在左边延伸12px并在边框和文本之间留出4px的空间。然后使用以下逻辑设置填充。
padding: [border-ext-top + space-between-borders-n-text]
[border-ext-right + space-between-borders-n-text]
[border-ext-bottom + space-between-borders-n-text]
[border-ext-left + space-between-borders-n-text];背景图像渐变（产生边框）设置为遵循与填充相同的右上角 - 左下角顺序。因此，请将background-position设置如下。
background-position: 0px [border-ext-top],
calc(100% - [border-ext-right]) 0px,
0px calc(100% - [border-ext-bottom]),
[border-ext-left] 0px,
[border-ext-left] [border-ext-top];由于更改了padding和background-position，因此还应更改创建内部填充的渐变的大小，以免溢出边框。
background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%,
calc(100% - [border-ext-left + border-ext-right]) calc(100% - [border-ext-top + border-ext-bottom]);
div {
padding: 10px 12px 14px 16px;
margin-bottom: 10px;
line-height: 1.4;
font-size: 14px;
color: #666;
background: linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#ECECEC, #ECECEC);
background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%, calc(100% - 20px) calc(100% - 16px);
background-position: 0px 6px, calc(100% - 8px) 0px, 0px calc(100% - 10px), 12px 0px, 12px 6px;
background-repeat: no-repeat;
}
/* Just for demo */
h1 {
margin: 0 0 10px;
text-transform: uppercase;
font-weight: 200;
letter-spacing: 3px;
font-size: 30px;
color: #009688;
}
body {
margin: 0;
padding: 0;
width: 100%;
font-family: Helvetica, Arial, sans-serif;
/* text-align: center; */
}<div>
<h1>Title Text here</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div>
<h1>Title Text here</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.</div>
答案 1 :(得分：7)
您可以使用单个元素和几个伪元素来实现此目的。快速演示可以在下面看到。
div {
position: relative;
height: 300px;
width: 80%;
margin: 30px;
background: tomato;
}
div:before {
content: "";
position: absolute;
top: -2px;
left: -30px;
width: calc(100% + 60px);
height: 100%;
border-top: 2px solid cornflowerblue;
border-bottom: 2px solid cornflowerblue;
}
div:after {
content: "";
position: absolute;
left: -2px;
top: -30px;
height: calc(100% + 60px);
width: 100%;
border-left: 2px solid cornflowerblue;
border-right: 2px solid cornflowerblue;
}<div>
<h4>Hello, World!</h4>
Some Text
</div>
答案 2 :(得分：1)
另一个解决方案是在.container中使用4个span元素，并使用before和after伪元素。
我已经使用了几种颜色作为出境博德，您可以理解，哪种css规则操纵边界。
span元素绝对定位到父元素。所以这个解决方案是完全响应的。
现在你可以单独操纵每条边界线。从理论上讲，所有边界线都可以有不同的高度/宽度，取决于线是水平线还是垂直线。
body {
margin: 0;
padding: 0;
width: 100%;
font-family: Helvetica, Arial, sans-serif;
}
.container {
margin: 50px auto 0;
padding: 0;
width: 75%;
position: relative;
}
.container > span:before, .container > span:after {
content: " ";
display: block;
position: absolute;
background-color: #ccc;
}
.container > span:nth-child(1):before, .container > span:nth-child(1):after {
width: 10px;
height: 1px;
left: 100%;
background-color: red;
}
.container > span:nth-child(1):before {
bottom: 0;
}
.container > span:nth-child(1):after {
top: 0;
}
.container > span:nth-child(2):before, .container > span:nth-child(2):after {
width: 10px;
height: 1px;
right: 100%;
background-color: blue;
}
.container > span:nth-child(2):before {
bottom: 0;
}
.container > span:nth-child(2):after {
top: 0;
}
.container > span:nth-child(3):before, .container > span:nth-child(3):after {
width: 1px;
height: 10px;
bottom: 100%;
background-color: orange;
}
.container > span:nth-child(3):before {
right: 0;
}
.container > span:nth-child(3):after {
left: 0;
}
.container > span:nth-child(4):before, .container > span:nth-child(4):after {
width: 1px;
height: 10px;
top: 100%;
background-color: green;
}
.container > span:nth-child(4):before {
right: 0;
}
.container > span:nth-child(4):after {
left: 0;
}
.box-inner {
padding: 20px;
background-color: #ECECEC;
height: 140px;
border: 1px solid #ccc;
}
.box-inner h1 {
margin: 0 0 10px;
text-transform: uppercase;
font-weight: 200;
letter-spacing: 3px;
font-size: 30px;
color: #009688;
}
.box-inner p {
margin: 0;
line-height: 1.4;
font-size: 14px;
color: #666;
}<div class="container">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="box-inner">
<h1>Title Text Here</h1>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
答案 3 :(得分：0)
你也可以使用 background-clip 一边background-image（渐变），background-size：
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
div {
width:400px;/* whatever*/
padding:20px;/* you need this ! use same units as for bg-position for better control */
margin:2em;/* whatever */
background:/* draw images needed to fake borders and bg-color */
linear-gradient(to top, black,black) 1em 0 repeat-y ,
linear-gradient(to top, black,black) calc( 100% - 1em) 0 repeat-y,
linear-gradient(to left, black,black) 0 1em repeat-x,
linear-gradient(to left, black,black) 0 calc(100% - 1em) repeat-x ,
linear-gradient(30deg,gray,lightgray) no-repeat;
background-size: 3px 100%, 3px 100%, 100% 3px ,100% 3px , auto auto ;
background-clip: border-box,border-box,border-box,border-box,content-box;
}
/* add some contet in html to test behavior , you may style it too */
p {
margin:0;
padding:0.5em;
text-align:justify
}<div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit met isi.</p>
</div>
实际上与harry非常相似，只是与用于通过内容区域内的渐变来绘制背景颜色的背景剪辑属性不同。
答案 4 :(得分：-1)
<ul>
<li><img src="#" class="logo"></li>
</u