8.17 纯css画一个着重号图标
今天看到一个同事写的着重号图标,我以为是图片,仔细一看,是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画一个着重号图标的更多相关文章
- 一个纯CSS DIV天气动画图标【转扒的】
<p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...
- 纯CSS实现一个微信logo,需要几个标签?
博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的html标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 【前端切图】用css画一个卡通形象-小猪佩奇
最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...
- div+css画一个小猪佩奇
用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container&quo ...
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 纯 CSS 创建一个三角形
[要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...
- 使用css画一个箭头
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
随机推荐
- elasticsearch-ik
因lucene默认采用英文且英文通过空格就可以断句.而中文则是词组,如果不加载中文词库或插件则会变为一个一个字而非词组,因此需要加载中文词库. 不加分词库所看到的中文分词效果. post _analy ...
- 网易云音乐api资料
https://github.com/LanFD/music_163 网易云音乐常用API浅析:http://moonlib.com/606.html
- ABAP-折叠窗口
1.测试 2.代码 *&---------------------------------------------------------------------* *& Report ...
- supervisor process management
supervisor是unix like系统的进程管理工具 安装: pip install supervisor 配置文件: echo_supervisord_conf # 打印一个配置文件样例 ec ...
- ISPF常用命令
[ISPF功能键] PF1: HELP帮助键 PF2: SPLIT键,改变分屏位置 PF3: END键,结束并退回上级菜单 PF4: RETURN键,结束并退回主菜单 PF5: REFIND键,重复最 ...
- Who am I?
陈治宏. 一只想做软件开发,但还在machine learning领域挣扎的计算机汪.
- openvas开放式漏洞评估系统
OpenVAS是开放式漏洞评估系统,也可以说它是一个包含着相关工具的网络扫描器.其核心部件是一个服务器,包括一套网络漏洞测试程序,可以检测远程系统和应用程序中的安全问题. 用户需要一种自动测试的方法, ...
- 新版openvpn for pc使用旧证书问题的处理
在client.ovpn中增加一句: tls-cipher "DEFAULT:@SECLEVEL=0"
- AAPTEXECPTION
Error:java.util.concurrent.ExecutionException: com.android.builder.\files-.aar\a234c5f0534a8da0e4db0 ...
- Ajax 学习 第一篇
http请求: 1.请求的方法或动作 2.正在请求的url 3.请求头 4.请求体 及请求正文 典型例子 get.post区别 1.get 幂等 执行一次哪怕一万次影响相同 一般用于信息获取 ...