8.17 纯css画一个着重号图标

Posted 2020-10-03 西西夏天

今天看到一个同事写的着重号图标，我以为是图片，仔细一看，是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！加油喽！！