css利用padding生成图标
先插入HTML结构:
<div class="line-three"></div>
<div class="circle"></div>
结构是不是很简洁!css代码如下:
.line-three{
width: 150px;height: 30px;
padding:15px 0;
border-top: 30px solid;
border-bottom: 30px solid;
background-color:currentColor;
background-clip: content-box;
}
.circle{color:green;
margin-top:30px;
width: 150px;
height: 150px;
border-radius: 50%;
border:10px solid;
padding:10px;
background: currentColor;
background-clip: content-box;}
效果图如下:
怎么样是不是很简单呢!我们现在来总结一下:
1,充分利用padding元素!
2,使用border元素,设定边框!
3,css3:background-clip:content-box;最好用的来啦:使用background:currentColor!!!
注:在这里说明一下:currentColor指的是当前文本色,也就是说,当文本的颜色改变的时候,背景色也会改变,就是图标的颜色也会改变。
使用这一特性可以实行更多更好的交互体验!!!如(hover)
css利用padding生成图标的更多相关文章
- css利用padding百分比实现图片自适应高度
应用场景 宽高比率,实现图片自适应高度,防止图片加载过程高度为0,加载完图片高度撑起,它下面的div抖动问题 重点:CSS百分比padding都是相对宽度计算的 <div class=" ...
- 基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作
在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这 ...
- CSS content内容生成技术以及应用
content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持:(Firefox 1.5+, Safari 3.5+, IE ...
- CSS content内容生成技术以及应用(转)
一.哗啦哗啦的简介 zxx://这里“哗啦哗啦”的作用是为了渲染一种氛围.content属性早在 CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部 ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作
http://www.cnblogs.com/wuhuacong/p/4093778.html 在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界 ...
- css与jquery、图标字体
*)还能这样选择 header #search input[type="text"] *)按钮常用颜色:#008cBA(字母大小写没有区别) *)清除浮动后,text-align没 ...
- 代码:CSS仿制 苹果按钮图标
首先,先复习一下:CSS的线性渐变.径向渐变 .linear{ background-image:-webkit-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 9 ...
- 使用IcoMoon生成图标字体
就我个人而言,往往要想找点什么ICON素材啊,往往都是酱婶滴,先去FontAwesome(在线图标字体库,但资源有限)里面巴拉巴拉,或者其他资源看看有没有合适的.如果没有就去求助我们大UI,笑笑给我来 ...
- 如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式
如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提 ...
随机推荐
- 用Excel创建SQL server性能报告
转载自Kun Lee "Creating SQL Server performance based reports using Excel" 性能测试调优中对数据库的监控十分重要, ...
- Java中excute,excuteUpdate,excuteQuery的区别
executeQuery(String sql) 执行select语句,它返回的是查询后得到记录集(resultset). executeUpdate(String sql) 执行 ...
- jquery常用总结
1.遍历对象 n是属性 value是对应的值 $.each(param,function(n,value) { datas[n] = value; }); 2.获取select改变后的值 $('sel ...
- Android 网络开发之WIFI
WIFI就是一种无线联网技术,常见的是使用无线路由器.那么在这个无线路由器的信号覆盖的范围内都可以采用WIFI连接的方式进行联网.如果无线路由器连接了一个ADSL线路或其他的联网线路,则又被称为&qu ...
- 如何静态添加toolbar到datagrid
这个示例向你展示如何添加toolbar到datagrid. 创建 DataGrid <table id="tt" class="easyui-datagrid&qu ...
- css优先级问题
关于CSS specificityCSS 的specificity 特性或称非凡性,它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用 ...
- 16-网易-intership
1.多选 //HTML <p>很长的一段文字,很长的一段文字,很长的一段文字,特别长的文字</p> //CSS p{ width:100px; white-space:nowr ...
- asp.net mvc4 过滤器的简单应用:登录验证
直接上代码,不要说话. ASP.NET MVC4过滤器的简单应用:验证登录 [AcceptVerbs(HttpVerbs.Post)] public ActionResult login(FormCo ...
- javascript创建文档碎片节点
在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...
- session,ajax 跨域cookie
什么是Session, 什么是Cookie? Session是由应用服务器维持的一个服务器端的存储空间,用户在连接服务器时,会由服务器生成一个唯一的SessionID,用该SessionID为标识符来 ...