进度条样式
2016-05-10 17:27
295 查看
<style>
.u-progress {
height: 25px;
background: #CBCBCB;
position: relative;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
overflow: hidden;
margin-bottom: 4px;
}
.u-progress .pgbar, .u-progress .pging {
display: block;
width: 100%;
height: 100%;
border-radius: 3px;
}
.u-progress .pging {
background: #FF3B23;
}
</style>
<p class="u-progress">
<span class="pgbar" style="width:42%;">
<span class="pging"></span>
</span>
</p>
.u-progress {
height: 25px;
background: #CBCBCB;
position: relative;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
overflow: hidden;
margin-bottom: 4px;
}
.u-progress .pgbar, .u-progress .pging {
display: block;
width: 100%;
height: 100%;
border-radius: 3px;
}
.u-progress .pging {
background: #FF3B23;
}
</style>
<p class="u-progress">
<span class="pgbar" style="width:42%;">
<span class="pging"></span>
</span>
</p>
相关文章推荐
- 一个简单版的波纹css3动画
- CSS零碎知识点
- [css]零散的重构知识
- 浅析CSS中calc()的使用
- 使用自定义透明Dialog样式的Activity
- 窗口样式表格
- 实用css总结
- CSS3动画效果——js调用css动画属性并回调处理详解
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- CSS3 :target伪类实现Tab切换效果 BY commy
- css中important的用处
- css :active伪类的理解
- CSS3 :target伪类的理解与使用
- css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类。自己留存
- 织梦模板安装后不能显示css的解决办法
- 最简化模型2——css3分阶段动画效果(经过实测)之转动的div
- CSS清楚浮动float
- [css]水平垂直居中的方法
- 最简化模型——css3分阶段动画效果(经过实测)
- ios tableview一些样式的整理