有时我发现自己处于一种情况,我想为元素的左侧和右侧定义border
规则。但说实话,border-left: solid 1px #999; border-right: solid 1px #999
有点笨拙。它浪费空间,我必须应用更改两次,它可能会或可能不会降低效率。我可以同时设置边界左边界和右边界边界吗?
有没有办法一次性定义水平边框或垂直边框?
有时我发现自己处于一种情况,我想为元素的左侧和右侧定义border
规则。但说实话,border-left: solid 1px #999; border-right: solid 1px #999
有点笨拙。它浪费空间,我必须应用更改两次,它可能会或可能不会降低效率。我可以同时设置边界左边界和右边界边界吗?
有没有办法一次性定义水平边框或垂直边框?
你可以做一个这样的:
#myDiv
{
width: 100px;
height: 100px;
border: 1px solid #999;
border-width: 0 1px; /*horizontal, vertical*/
}
从https://developer.mozilla.org/en-US/docs/CSS/border:
虽然边框宽度,边框样式,和边框颜色属性和 甚至margin和padding简写属性接受多达四个 值,允许为不同的边框设置不同的宽度,样式或颜色,该属性只接受每个 属性的一个值,导致四个边缘的边框相同。
所以,你可以切换到使用单独的边框宽度,边框样式,和边框颜色的属性,使用他们的速记属性来设置每边的风格 - 但我认为你最好为你拥有了它。
也就是说,确保您将样式定义保存为CSS类 - 然后可以跨元素重用,而不是在整个页面上的元素的“样式”属性中逐个应用这些属性。
不幸的是,在CSS中没有选项...您必须手动编写所有边框参数。
<div id="myDiv">Your Div</div>
CSS:
#myDiv
{
border-width:0 1px 0 1px;
border-color:#ddd;
}
这是迄今为止我见过的最短的解决方案。谢谢! – Pieter