转换为语音并朗读全文 00:00 / 00:00

cssborderwidth前端时间在Jayuh Blog看见一篇利用border制作纯CSS三角形的文章,联想到这个自称世界最高的网页,一下子兴趣来了。
我想知道css里border的最大宽度是多少,于是改了一下Jayuh的demo。
做了一个CSS边框之最大宽度的探讨
经过研究发现,CSS边框最大宽度是

4294967294px

,你们去试试看,这个值准不准确。
戳我查看

Add:2013-05-30 16:30


经过高手指点,CSS边框最大宽度:
无符号是0px~(2³²-1)px,有符号是(-2^16)px~(2^16-1)px,你了解了吗?

Add:2013-05-30 16:50


最新研究发现,火狐无视最大限制。
就算你输入99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999px,丫的也照样显示出来,只是....浏览器页面没有那么宽,也没有那么长,所以超出的部分就被吃了。

Add:2013-05-30 17:02


Opera逆天了,春哥附体,照单全收。
Opera才不管你边框最大多宽,有多宽显示多宽,而且一点也不卡。

Add:2013-05-30 17:05


根据各浏览器显示出的效果判断,其实都是有极限的,极限就是网页的宽高,目前,它最大值是(2^32-1)px。

代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>CSS边框之最大宽度的探讨 | 麦田一根葱的博客(余小昔)</title>
<meta name="keywords" content="css,css边框宽度,border-width">
<style type="text/css">
*{margin:0;padding:0; }
body{padding:20px 50px 0; font:14px/200% "微软雅黑";}
.clearfix:after{display:block;content:"";clear:both;visibility:hidden;font-size:0;height:0;}
.clearfix{*zoom:1;}
.header{border-bottom:1px solid #000;}
.footer{line-height:50px;text-align:center;color:#666;}
.footer a{padding:0 5px;color:#999;}
h1{float:left;padding:20px 0;font-size:24px;font-weight:normal;}
.css_tool{float:right;line-height:50px;font-size:30px;}
.decoration{padding:10px 0;color:#666;}
.set_up{float:left;}
.set_up th{text-align:left;}
.set_up td{padding:0 5px;color:#999;}
.set_up td .input{width:140px;height:22px;line-height:22px;padding:0 5px;}
.set_up td .bian{width:100px;height:22px;line-height:22px;padding:0 5px; margin-right:5px;}
.set_up td input[type=text] + span{color:#F00;}
.set_up td select{width:152px;height:24px;line-height:22px;}
.set_up td input, .set_up td select{color:#666;border-radius:3px;border:1px solid #CCC;font-family:Airly;}
.set_up td input[type=button]{margin:5px 0;padding:25px 15px;font-size:18px; font-family:"微软雅黑";background-color:#008B8B;border:0 none;color:#F0FFFF;cursor:pointer;}
.set_up td span{font-weight:bold;color:#000;}
.set_up td i{padding:0 3px;color:#333;}
.demo{padding:30px 50px;border:2px dashed #008B8B;display:inline-block;}
pre{border-radius:8px;padding:10px 20px;background-color:#000;color:#FFD700;}
</style>
</head>
<body>
<div class="header clearfix">
<div class="css_tool">无聊的工具</div>
<h1>CSS边框之最大宽度的探讨</h1>
</div>

<p class="decoration">最大宽度<em>4294967294px</em>,不信你输入试试</p>

<div class="clearfix">
<table class="set_up">
<tbody>
<tr>
<th width="120">&nbsp;&nbsp;直角边1</th>
<th width="140">&nbsp;直角边2</th>
<th width="180">&nbsp;颜色值</th>
<th width="160">&nbsp;斜边方向</th>
<td rowspan="3"><input id="submit" type="button" value="写好了戳我生成"></td>
</tr>
<tr>
<td colspan="2"><input id="sizeb1" type="text" class="bian" value="50px"><input id="sizeb2" type="text" class="bian" value="50px"> <span>√</span></td>
<td><input id="color" type="text" class="input" value="#F00000"> <span>√</span></td>
<td><select id="arrow">
<option value="up">左上</option>
<option value="right">右上</option>
<option value="down">左下</option>
<option value="left" selected>右下</option>
</select></td>
</tr>
<tr>
<td colspan="2">单位,如px、em、pt等</td>
<td>16进制或英文颜色值</td>
<td>斜边面对的方向</td>
</tr>
</tbody></table>
</div>
<div id="demo" class="demo">
<p>效果展示:<span class="triangle" style="display:inline-block; vertical-align:middle; border-width: 50px 50px 0px 0px ; border-color: #F00000 transparent transparent transparent; border-style:solid dashed none dashed;"></span></p>
</div>

<p>CSS 代码:</p>
<pre id="css_code">.triangle{<br> display:inline-block;<br> vertical-align:middle;<br> border-width:50px 50px 0px 0px;<br> border-color:#F00000 transparent transparent transparent;<br> border-style:solid dashed none dashed;<br>}</pre>

<div class="footer">&copy;麦田一根葱<a href="http://www.yuxiaoxi.com/" target="_blank">Yuxiaoxi.com</a> 2012-2013</div>

<script type="text/javascript">
window.onload = function() {
go();

var inputSizeb1 = document.getElementById("sizeb1");
var inputSizeb2 = document.getElementById("sizeb2");
var inputColor = document.getElementById("color");
var submit = document.getElementById("submit");
var inputSizeBool = true;
var inputColorBool = true;

//验证表单
inputSizeb1.onblur = function() {
var re = /^[0-9.]+in|cm|mm|em|ex|pt|pc|px$/i; //数字 + 单位
if(re.test(this.value)){
this.parentNode.lastChild.innerHTML = "&radic;";
inputSizeBool = true;
}else{
this.parentNode.lastChild.innerHTML = "&times;";
inputSizeBool = false;
}
}
inputSizeb2.onblur = function() {
var re = /^[0-9.]+in|cm|mm|em|ex|pt|pc|px$/i; //数字 + 单位
if(re.test(this.value)){
this.parentNode.lastChild.innerHTML = "&radic;";
inputSizeBool = true;
}else{
this.parentNode.lastChild.innerHTML = "&times;";
inputSizeBool = false;
}
}
inputColor.onblur = function() {
var re = /^#[a-f0-9]{3}$|^#[a-f0-9]{6}$|^\w{3,}$/i; // #FFF 或 #FFFFFF 或 red
if(re.test(this.value)){
this.parentNode.lastChild.innerHTML = "&radic;";
inputColorBool = true;
}else{
this.parentNode.lastChild.innerHTML = "&times;";
inputColorBool = false;
}
}
//提交
submit.onclick = function() {
if(inputSizeBool == false || inputColorBool == false){
alert("温柔点别乱写!");
return
};
go();
}
};

function go() {
//获取基本元素及值
var sizeValb1 = document.getElementById("sizeb1").value;
var sizeValb2 = document.getElementById("sizeb2").value;
var colorVal = document.getElementById("color").value;
var arrowVal = document.getElementById("arrow").value;
var cssCode = document.getElementById("css_code");
var demo = document.getElementById("demo").getElementsByTagName("span")[0];
//公共样式
var basicStyle1 = "display:inline-block;";
var basicStyle2 = "vertical-align:middle;";
var split = "<br /> ";
var cssCodeBasicStyle = basicStyle1 + split + basicStyle2;
var demoBasicStyle = basicStyle1 + basicStyle2;
//动态样式
var borderWidth, borderColor, borderStyle;
switch(arrowVal)
{
case "up":
borderWidth = "border-width:" + "0px " + "0px " + sizeValb1 + " " + sizeValb2 + ";";
borderColor = "border-color:transparent transparent " + colorVal + " transparent;";
borderStyle = "border-style:none dashed solid dashed;";
break;
case "right":
borderWidth = "border-width:" + sizeValb1 + " " + "0px " + "0px " + sizeValb2 + ";";
borderColor = "border-color:transparent transparent transparent " + colorVal + ";";
borderStyle = "border-style:dashed none dashed solid;";
break;
case "left":
borderWidth = "border-width:" + sizeValb1 + " " + sizeValb2 + " " + "0px " + "0px" + ";";
borderColor = "border-color:" + colorVal + " transparent transparent transparent;";
borderStyle = "border-style:solid dashed none dashed;";
break;
case "down":
borderWidth = "border-width:" + "0px" + " " + sizeValb1 + " " + sizeValb2 + " 0px" + ";";
borderColor = "border-color:transparent " + colorVal + " transparent transparent;";
borderStyle = "border-style:dashed solid dashed none;";
break;
}
//输出css代码
cssCode.innerHTML = ".triangle{" + split + cssCodeBasicStyle + split + borderWidth + split + borderColor + split + borderStyle + "<br />}";
//给demo赋值
demo.style.cssText = demoBasicStyle + borderWidth + borderColor + borderStyle;
};
</script>

</body></html>

如果你觉得文章不错,可以给点小小奖励~

微信

微信

支付宝

支付宝

带符号 * 的表示必填项
  1. 梦月酱
    梦月酱

    是根据位宽限制的

    回复
    1. 麦田一根葱
      麦田一根葱博主

      位宽?好像很厉害的样子

      回复
  2. 沈梦姿
    沈梦姿

    对CSS只了解一些皮毛

    回复
    1. 麦田一根葱
      麦田一根葱博主

      css3很强大

      回复
  3. tiandi
    tiandi

    CHROME还好,不卡,只不过还是有限制。

    回复
    1. 麦田一根葱
      麦田一根葱博主

      一语中的

      回复