HTML5中新增了progress标签,用来表示进度条
<!-- 进度条 -->
<progress class="progress" value="20" max="100"></progress>
显示效果如下:
其中CSS样式代码如下:
.progress{
width: 300px;
height: 20px;
border: none;
background-color:#d7d7d7;
}
.progress::-webkit-progress-bar{
background-color:#d7d7d7;
}
progress::-webkit-progress-value{
background-color:rgb(86,199,99);
}
解释下,在Chrome浏览器中
progress是以如下结构渲染的
progress
↓
::-webkit-progress-bar 全部进度
↓
::-webkit-progress-value 已完成进度
通过这两个伪元素为其添加样式。
但在别的浏览器中又有所不同,如IE10,这两个伪元素不起作用,直接用color样式可以修改已完成进度的颜色,而全部进度为background
FireFox中progress-bar为已完成进度,background为全部进度,而Opera中对这个样式只能为浏览器默认样式。
因此兼容性写法可以考虑如下:
.progress{
width: 300px;
height: 20px;
border: none;
background-color:#d7d7d7;
color:rgb(86,199,99);
}
.progress::-webkit-progress-bar{
background-color:#d7d7d7;
}
progress::-webkit-progress-value{
background-color:rgb(86,199,99);
}
.progress::-moz-progress-bar{
background-color:rgb(86,199,99);
}
浏览器内核以及私有前缀:
根据不同的内核,一些私有属性的css前缀不一样
Gecko内核 css前缀为"-moz-" 火狐浏览器
WebKit内核 css前缀为"-webkit-" Comodo Drangon(科摩多龙),苹果,搜狗高速浏览器3,快快浏览器,枫树浏览器,云游浏览器,360极速浏览器,世界之窗极速版,SRWare Iron,猎豹浏览器,RockMelt,QQ浏览器
Presto内核 css前缀为"-o-" Opera(欧朋),NDSBrowser
Trident内核 css前缀为"-ms-" IE,360极速浏览器,猎豹安全浏览器,傲游浏览器,百度浏览器,世界之窗浏览器,2345浏览器,腾讯TT,淘宝浏览器,采编读浏览器,搜狗高速浏览器,阿云浏览器,瑞星安全浏览器,Slim Browser,GreenBrowser、爱帆浏览器,115浏览器,155浏览器,114浏览器,N氧化碳浏览器,糖果浏览器,彩虹浏览器,瑞影浏览器,勇者无疆浏览器,闪游浏览器,蚂蚁浏览 器,飞腾浏览器,速达浏览器,佐罗浏览器,海豚浏览器(iPhone/iPad/Android),UC浏览器
Trident内核 css前缀为"-khtml-": 苹果浏览器之前的版本,后改为WebKit内核
*因不同浏览器,版本原因,内核数量不一样,所以以上内核说明浏览器会出现多次,详见百度百科中浏览器内核一文。
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); /*为nothing*/
若有不足请多多指教!希望给您带来帮助!参考文献:https://www.cnblogs.com/bloom-in-dream/p/6885285.html