css中border:none;与border:0;的差别表明

日期:2021-03-12 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

这难题在互联网坚信早已有很多人问到,近期再度被牵起探讨,籍此纪录1下本人的了解,border:none;与border:0;的差别反映有两点:1是基础理论上的特性差别2是访问器适配性的差别。

1.特性差别
【border:0;】把border设为“0”像素尽管在网页页面上看看不到,但按border默认设置值了解,访问器仍然对border-width/border-color开展了3D渲染,即早已占有了运行内存值。
【border:none;】把border设为“none”即沒有,访问器分析“none”时将不作出3D渲染姿势,即不容易耗费运行内存值。

2.适配性差别
适配性差别只对于访问器IE6、IE7与标识button、input而言,在win、win7、vista 的XP主题下均会出現此状况。

【border:none;】当border为“none”时好像对IE6/7失效边框仍然存在,以下例Demo1

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>borderl:none;与border:0;的差别</title>
<style type="text/css">
input,button{border:none;}
</style>
</head>
<body>
<h3>&lt;button&gt;</h3>
<button type="button">button</button>
<h3>&lt;input&gt;</h3>
<input name="" type="button" value="input button" />


<input name="" type="text" value="input text" />
</body>
</html>

【border:0;】当border为“0”时,觉得比“none”更合理,全部访问器都1致把边框掩藏,以下例Demo2

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>borderl:none;与border:0;的差别</title>
<style type="text/css">
input,button{border:0;}
</style>
</head>
<body>
<h3>&lt;button&gt;</h3>
<button type="button">button</button>
<h3>&lt;input&gt;</h3>
<input name="" type="button" value="input button" />


<input name="" type="text" value="input text" />
</body>
</html>

总结:
1. 比照border:0;与border:none;之间的差别在于有3D渲染和没3D渲染,觉得她们和display:none;与visibility:hidden;的关联相近,而针对border特性的3D渲染特性比照临时没找检测的方式,尽管觉得她们存在3D渲染特性上的差别但也只能说是基础理论上。

2. 怎样让border:none;完成全适配?只必须在同1挑选符上加上情况特性便可,以下例Demo3

针对border:0;与border:none;本人更向于应用,border:none;,由于border:none;终究在特性耗费沒有争议,并且适配性能用情况特性处理不够以变成阻碍。

上一篇:css3绘图天猫logo完成编码 返回下一篇:没有了