今天看到一个同事写的着重号图标,我以为是图片,仔细一看,是span标签!哇!!学习一下哈哈

图标长这样:

CSS代码:

.hint{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid red;
border-radius: 10px;
color: red;
text-align: center;
margin-left: 10px;
cursor: default;
}

页面这样写:

return o.projectStatus + '<span class="hint" title="审核不通过">!</span>'

这里用到一个CSS3的新属性---border-radius

w3school对border-radius的介绍:

定义和用法
border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。
提示:该属性允许您为元素添加圆角边框!
默认值: 0
继承性: no
版本: CSS3
JavaScript 语法: object.style.borderRadius="5px"

还很贴心的提示了可以为元素添加圆角边框!

以下源于 参阅资料:http://www.cnblogs.com/wansimin/articles/4365040.html

原来CSS3之前实现圆角的效果只能通过图片或者设置margin属性实现,过程比较繁琐,CSS3的到来简化了圆角的实现方式!!!

画实心圆的方法就是元素的高度和宽度一致,然后将四个角设置为高度或宽度的1/2。

这里是先在span里写一个感叹号,颜色为红色,设置span的高宽为20px,border为1px  solid  red,border-radius为高宽一半,即10px~完成!!棒棒哒!!!

CSS3对于边框给出了三个属性:

  • border-radius,设置圆角边框
  • box-shadow,向方框添加阴影
  • border-image,用图片创建边框

最近git了解差不多了,开始学习CSS3!加油喽!!

   

8.17 纯css画一个着重号图标的更多相关文章

  1. 一个纯CSS DIV天气动画图标【转扒的】

    <p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...

  2. 纯CSS实现一个微信logo,需要几个标签?

    博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的html标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个 ...

  3. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  4. 【前端切图】用css画一个卡通形象-小猪佩奇

    最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...

  5. div+css画一个小猪佩奇

    用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container&quo ...

  6. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. 纯 CSS 创建一个三角形

    [要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...

  8. 使用css画一个箭头

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

随机推荐

  1. elasticsearch-ik

    因lucene默认采用英文且英文通过空格就可以断句.而中文则是词组,如果不加载中文词库或插件则会变为一个一个字而非词组,因此需要加载中文词库. 不加分词库所看到的中文分词效果. post _analy ...

  2. 网易云音乐api资料

    https://github.com/LanFD/music_163 网易云音乐常用API浅析:http://moonlib.com/606.html

  3. ABAP-折叠窗口

    1.测试 2.代码 *&---------------------------------------------------------------------* *& Report ...

  4. supervisor process management

    supervisor是unix like系统的进程管理工具 安装: pip install supervisor 配置文件: echo_supervisord_conf # 打印一个配置文件样例 ec ...

  5. ISPF常用命令

    [ISPF功能键] PF1: HELP帮助键 PF2: SPLIT键,改变分屏位置 PF3: END键,结束并退回上级菜单 PF4: RETURN键,结束并退回主菜单 PF5: REFIND键,重复最 ...

  6. Who am I?

    陈治宏. 一只想做软件开发,但还在machine learning领域挣扎的计算机汪.

  7. openvas开放式漏洞评估系统

    OpenVAS是开放式漏洞评估系统,也可以说它是一个包含着相关工具的网络扫描器.其核心部件是一个服务器,包括一套网络漏洞测试程序,可以检测远程系统和应用程序中的安全问题. 用户需要一种自动测试的方法, ...

  8. 新版openvpn for pc使用旧证书问题的处理

    在client.ovpn中增加一句: tls-cipher "DEFAULT:@SECLEVEL=0"

  9. AAPTEXECPTION

    Error:java.util.concurrent.ExecutionException: com.android.builder.\files-.aar\a234c5f0534a8da0e4db0 ...

  10. Ajax 学习 第一篇

    http请求: 1.请求的方法或动作 2.正在请求的url 3.请求头 4.请求体 及请求正文 典型例子 get.post区别 1.get    幂等  执行一次哪怕一万次影响相同 一般用于信息获取 ...