我希望一个div的边框宽度与字体大小成比例,所以我设置了像 border-width: 0.1em;
这样的值。但是如果字体太小,边框就不会显示出来,因为它渲染成了0.5px
。这显然不是我想要的结果。有没有办法设置最小边框宽度为1px
呢?
div {
border: 0.1em solid black;
}
我希望一个div的边框宽度与字体大小成比例,所以我设置了像 border-width: 0.1em;
这样的值。但是如果字体太小,边框就不会显示出来,因为它渲染成了0.5px
。这显然不是我想要的结果。有没有办法设置最小边框宽度为1px
呢?
div {
border: 0.1em solid black;
}
border-width: max(1px, 0.1em);
border-style: solid;
border-color: black;
不幸的是,目前没有任何浏览器支持这个惊人的CSS3特性,但我希望这很快会改变!
但在CSS2中 - 不行,你不能这么做。
但是,你可以使用JavaScript / jQuery来循环遍历所有元素,并将边框大小增加到1px。
但是,如果页面上有太多元素(例如超过50-100行的表),那么这会消耗大量的性能,使你的浏览器崩溃。
因此,换句话说,不可能实现。
$("[id$='ReportViewerControl']").find('*')
.each(function () {
if($(this).is('#ParametersRowReportViewerControl *'))
return;
//console.log("Processing an element");
//var cls = $(this).attr("class");
// Don't add a border to sort-arrow
if ($(this).is('img')) {
return;
}
var anywidth = $(this).css('width');
var anywidth = parseFloat(anywidth);
//console.log("anywidth: " + anywidth);
//var lol = $(this).css('borderLeftWidth');
var blw = $(this).css('border-left-width');
var brw = $(this).css('border-right-width');
var btw = $(this).css('border-top-width');
var bbw = $(this).css('border-bottom-width');
var borls = $(this).css('border-left-style') == "solid";
var borrs = $(this).css('border-right-style') == "solid";
var borts = $(this).css('border-top-style') == "solid";
var borbs = $(this).css('border-bottom-style') == "solid";
var blw = parseFloat(blw);
var brw = parseFloat(brw);
var btw = parseFloat(btw);
var bbw = parseFloat(bbw);
//parseInt($(this).css("borderRightWidth"))
//console.log(parseInt($(this).css("borderLeftWidth")));
// UpdateLock = true;
// Set width to 1px where 0px
if (anywidth == 0)
$(this).css('width', '1px');
if (borls && blw == 0.0 || (blw > 0.0 && blw < 1.0)) {
//console.log("setting border width");
$(this).css('border-left-width', '1px');
}
if (borrs && brw == 0.0 || (brw > 0.0 && brw < 1.0)) {
$(this).css('border-right-width', '1px');
}
if (borts && btw == 0.0 || (btw > 0.0 && btw < 1.0)) {
$(this).css('border-top-width', '1px');
}
if (borbs && bbw == 0.0 || (bbw > 0.0 && bbw < 1.0)) {
$(this).css('border-bottom-width', '1px');
}
// UpdateLock = false;
}); // End $('*').each
box-shadow
小于1像素也会呈现出来,所以使用它代替边框可能是一个好主意(Christina在问题的评论中实际上建议这样做)。然而,有些浏览器如果box-shadow
太细的话就不会呈现出来(Firefox会这样做)。此外,box-shadow
不会增加盒模型,因此可能需要使用额外的margin
。
以下是克服这些问题的尝试。请注意,我不得不采用JavaScript userAgent检测黑客(如果是webkit浏览器,只需向body添加一个额外的类),因为我无法仅使用CSS实现它。
if (navigator.userAgent.toLowerCase().indexOf("webkit") > -1)
{
document.body.className += " webkitHack";
}
/* Borders */
.border{
border:0.0625em solid black;
}
.shadowyBorder{
box-shadow: 0 0 0 0.0625em black;
/* Compensating for the fact that box-shadow doesn't count towards box model */
margin: 0.0625em;
}
.comboBorder
{
/* If it's not webkit use border */
border:0.0625em solid black;
}
/* If it's webkit use box-shadow */
.webkitHack .comboBorder
{
border: none;
box-shadow: 0 0 0 0.0625em black;
/* Compensating for the fact that box-shadow doesn't count towards box model */
margin: 0.0625em;
}
/* Extras */
td, th
{
padding:5px;
}
.em05
{
font-size:8px;
}
.em1
{
font-size:16px;
}
.em2
{
font-size:32px;
}
.box
{
display:inline-block;
height:1em;
width:1em;
}
<table>
<tr>
<th>Font size</th><th>Border</th><th>Box shadow</th><th>Box shadow in webkit</th>
</tr>
<tr>
<td>
8px
</td>
<td class="em05">
<div class="box border"></div>
</td>
<td class="em05">
<div class="box shadowyBorder"></div>
</td>
<td class="em05">
<div class="box comboBorder"></div>
</td>
</tr>
<tr>
<td>
16px
</td>
<td class="em1">
<div class="box border"></div>
</td>
<td class="em1">
<div class="box shadowyBorder"></div>
</td>
<td class="em1">
<div class="box comboBorder"></div>
</td>
</tr>
<tr>
<td>
32px
</td>
<td class="em2">
<div class="box border"></div>
</td>
<td class="em2">
<div class="box shadowyBorder"></div>
</td>
<td class="em2">
<div class="box comboBorder"></div>
</td>
</tr>
</table>
inset
box-shadow
和额外填充。 - jahu
thin
、medium
和thick
来设置border-width
(只要它们与您喜欢的宽度匹配)。它们会随着界面的缩放而自适应。 - tomasz86