首页 > 蚂蚁部落 > 正文

css实现带有叉号关闭按钮的圆角层
2017-08-29 10:13:19   来源:   评论:0 点击:

分享一段代码实例,它利用css实现了带有叉号关闭按钮的层效果。代码实例如下:[HTML] 纯文本查看 复制代码& 36816;& 34892;& 20195;& 3072

分享一段代码实例,它利用css实现了带有叉号关闭按钮的层效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style>div{  background: rgba(0,0,0,.5);  padding: 10px;  margin: 0 10px;  overflow:hidden;  border-radius:10px;  width:300px;}a {  color: white;  text-decoration:none;}a:before {  display:inline-block;  font-size: 1rem;   width:1.3rem;   margin-right:.3rem;   text-align: center;   line-height: 1.3;   background:white;   border-radius: 50%;   letter-spacing: normal;}.delete { float:right; }.delete:before {  content:'2716';  color:#b00;}</style></head><body>  <div>    <a class="delete" href="javascript:">删除</a>  </div></body></html>

上面的代码实现我们的要求,当然只是css实现的静态效果。

相关阅读:

(1).rgba()可以参阅CSS3 RGBA颜色一章节。

(2).border-radius可以参阅CSS3 border-radius一章节。

相关热词搜索:

上一篇:css实现文本溢出用省略号替代简单介绍
下一篇:css条纹边框代码实例

分享到: 收藏
评论排行