消除对边界角的斜角效应 [英] Removing the Bevel Effect on the Corner of Borders
问题描述
如果元素存在于具有多个边框颜色的页面上,则这些颜色相遇的角落默认创建一个斜角。这似乎是一个奇怪的选择,边角的风格。
为了说明这种效果,请考虑以下几点:
p>
请参阅示例jsFiddle示例,我在此创建了此处。 p>
顶部两个项目显示默认的倾斜行为。底部两个显示所需的预期行为,在这种情况下,边框顶部overpowers或覆盖边框左边和边框右边的角。
顶部大小写的标记:
< div class =container>
< div class =border>第一项< / div>
< div class =border>项目二< / div>
< / div>
和CSS:
.container {
margin:5px;
width:150px;
background:yellow;
}
.border {
padding:5px;
border:15px solid red;
border-top:15px solid teal;
}
底部标记:
< div class =container>
< div class =border-top>< / div>
< div class =border-reg>第一项< / div>
< div class =border-top>< / div>
< div class =border-reg>项目二< / div>
< / div>
和CSS:
.border-top {
border-top:15px solid teal;
}
.border-reg {
border:15px solid red;
border-top:0;
padding:5px;
}
虽然我设计的第二种方法产生了我想要的效果,如果这是不必要的乏味的东西,我会假设有默认状态。如果我想要边框左边重写其他边框,例如,我必须处理一些 float:left
和内联元素疯狂。
问题(最后)
有没有更容易的方法去除在所有浏览器上观察到的默认倾斜行为? p>
虽然上面详述的情况最容易使边框顶部或边框底部覆盖角落,但它不是一个任务的简单,例如,如果我需要
这是边框工作的方式,它是边框左边和边框右边覆盖边框顶部和边框底部。我相信没有办法改变这个没有额外的元素。
而不是空的div,你可以使用wrapper div。
< div class =outer>
< div class =inner> test< / div>
< / div>
.inner {
padding:5px;
border:15px solid red;
border-top:0;
}
.outer {
border-top:15px solid teal;
}
演示: http://jsfiddle.net/fmcvY/
还有另一种方法可以用
>< div> test< / div>
div {
padding:5px;
border:15px solid red;
border-top:0;
position:relative;
padding-top:20px; / *边框宽度加上所需的填充* /
}
div:before {
content:'';
display:block;
background:teal;
height:15px;
padding:0 15px; / * border width加div填充* /
width:100%;
position:absolute;
top:0;
left:-15px; / * border width加div填充* /
}
数目不同的方式实现相同的效果。演示: http://jsfiddle.net/fmcvY/3/
If an element exists on a page with more than one border color, the corner where these colors meet create a bevel by default. This seems like an odd choice for the border-corner style. I would instead prefer that one of the borders "overpowers" the other border such that a straight line is shown instead.
To illustrate this effect, consider the following:
See example jsFiddle example I created here.
The top two items display the default, beveled behavior. The bottom two display the desired, expected behavior, where in this case, border-top "overpowers" or "overrides" the corner of border-left and border-right.
The markup for the top case:
<div class="container">
<div class="border">Item one</div>
<div class="border">Item two</div>
</div>
And the CSS:
.container {
margin : 5px;
width : 150px;
background : yellow;
}
.border {
padding : 5px;
border : 15px solid red;
border-top : 15px solid teal;
}
The markup for the bottom case:
<div class="container">
<div class="border-top"></div>
<div class="border-reg">Item one</div>
<div class="border-top"></div>
<div class="border-reg">Item two</div>
</div>
And the CSS:
.border-top {
border-top : 15px solid teal;
}
.border-reg {
border : 15px solid red;
border-top : 0;
padding : 5px;
}
Although the second method I devised does produce the effect I want, it seems as if this is unnecessarily tedious for something that I would have assumed to have the default state. If I were to want the border-left to override the other borders, for example, I would have to deal with some float: left
and inline element madness.
The Question (Finally)
Is there any easier method of removing the default bevel-behavior observed on all browsers?
Although the case detailed above is mostly easy for having the border-top or border-bottom overriding the corners, it is not as easy of a task, for example, if I need the border-left and border-right to override the border-top and border-bottom.
That's the way borders work, I believe there's no way to change this without an extra element.
Instead of empty divs, you can use wrapper divs.
<div class="outer">
<div class="inner">test</div>
</div>
.inner {
padding : 5px;
border : 15px solid red;
border-top: 0;
}
.outer {
border-top : 15px solid teal;
}
Demo: http://jsfiddle.net/fmcvY/
There's another way to do it with :before/:after
psuedo elements but it's a little messier, however it requires no extra markup:
<div>test</div>
div {
padding : 5px;
border : 15px solid red;
border-top: 0;
position:relative;
padding-top: 20px; /* border width plus desired padding */
}
div:before {
content:' ';
display:block;
background: teal;
height:15px;
padding:0 15px; /* border width plus div padding */
width:100%;
position:absolute;
top: 0;
left:-15px; /* border width plus div padding */
}
You can write the CSS in a number of different ways to achieve the same effect. Demo: http://jsfiddle.net/fmcvY/3/
这篇关于消除对边界角的斜角效应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!