css完成下图

<div></div>
div{
height: 48px;
width: 80px;
padding: 0 16px 0 32px;
background: rgba(0,0,0,.6);
position: relative;
overflow: hidden;
}
div:after{
display: block;
content: "";
height: 24px;
width: 24px;
position: absolute;
top: 12px;
right: -12px;
background: #FFFFFF;
border-radius: 50%; }
css完成下图的更多相关文章
- css画下图
通常我看到这种效果,都是直接ps解决,但是不断重申性能的今天,显然不适应时代的需求啊! 今天看到群里有人问这种效果怎么做了,我在思考的时候,有人已经给出答案了: 我就测试了一下,发现确实可以实现,总结 ...
- 用css伪类实现提示框效果
题目要求用css实现下图效果: 很明显难点就在那个多出去的三角形上,下面代码是用一个div来实现的,用到了伪类 : befor和 : after,使用这两个伪类活生生的在div之前和之后多出了&quo ...
- css实现的透明三角形
css实现下图样式,具体像素值记不住了,很好设置,html code (2014百度秋招面试题): <div id="demo"></div> 分析:这 ...
- chrome 调试 SASS
第一步: 执行sass预编译命令 先来我的项目文件夹结构: ->进入sass /css文件下->打开cmd命令 ->输入sass --watch --scss test.scss: ...
- springmvc 精华
Spring Mvc简介: Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求 ...
- 拒绝QQ空间-手把手教你美化博客
为什么要美化? 博客园的主题看起来是有一些年代感了,应该是不符合当代大学生的审美了,起码我就觉得不行,所以我们要进行一些美化,但是搞技术的人的博客不应该搞得花里胡哨,最好是简洁一些(个人想法),网上有 ...
- SpringMvc入门四----rest风格Url
知识点: REST风格URL简介 SpringMvc对rest风格的支持 @PathVariable 获取 Url 变量 SpringMvc对静态资源的处理 REST风格URL简介: 我们平时看到的s ...
- 微信小程序在sublime开发代码高亮显示
问题:xxx.wxml 和xxx.wxss在subline中不高亮不显示 如下图,开发起来非常的不方便 解决办法:右下角将Plain Text改为Html,问题解决,可高亮,提高代码可读性,可提示,提 ...
- 【selenium】- webdriver常见元素定位(中)
本文由小编根据慕课网视频亲自整理,转载请注明出处和作者. 1.By.tagName 遇到hidden就break,继续下一个循环. 2.By.linkText 对上图中的“糯米”进行定位: 3.By. ...
随机推荐
- Java连接Oracle/MySQL数据库教程
一.下载 oracle java驱动下载地址:http://www.oracle.com/technetwork/database/enterprise-edition/jdbc-112010-090 ...
- 反向代理/负载均衡/session/cookie
正向代理:客户端将流量重定向到burpsuite等软件或连接到VPN再访问服务器而不是直接访问服务器的场景.流量流动方向是真正机器--代理服务器.正向代理又称代理.普通代理. 反向代理:服务器端使用反 ...
- vs2015 编译时项目出现NuGet程序包还原失败,找不到xxx.xxx.xxx版本的程序包,怎么解决这个问题?
vs2015 编译时出现这个NuGet程序包还原失败问题,项目还是运行得了,就是每次看到错误列表中有很多个错误,就感觉不舒服. 总算被我找到解决方法了 问题截图:
- Minimum supported Gradle version is 4.1. Current version is 2.14.1
Error:Minimum supported Gradle version is 4.1. Current version is 2.14.1. If using the gradle wrappe ...
- Java Web(十一) 文件上传与下载
文件上传 上传的准备工作 表单method必须为post 提供file组件 设置form标签的enctype属性为multipart/form-data,如果没有设置enctype属性,浏览器是无法将 ...
- Grafana配置SingleStat图表信息(三)
Grafana是一个用于展示数据的工具,配置数据源,直接连接数据库.(这里的数据库应该是结果库,直接需要给用户看的结果数据信息) SingleStat : 想用来展示单一数据信息的图表,效果图如图 ( ...
- 不管你是否已经准备面试, 这45道Python面试题都对你非常有帮助!(mark!)
1)什么是Python?使用Python有什么好处? Python是一种编程语言,包含对象,模块,线程,异常和自动内存管理.蟒蛇的好处在于它简单易用,可移植,可扩展,内置数据结构,并且它是一个开源的. ...
- C++基础知识:STL简介
1.标准模板库STL ― STL , 即 : Standard Template Library , 是 C++的一部分― STL是常用数据结构和算法的集合― STL的目标是标准化组件 , 提高开发效 ...
- DevExpress ASP.NET Bootstrap Controls v18.2新功能详解(二)
行业领先的.NET界面控件2018年第二次重大更新——DevExpress v18.2日前正式发布,本站将以连载的形式为大家介绍新版本新功能.本文将介绍了DevExpress ASP.NET Boot ...
- 初始化集合的花样new HashMap<String, String>{ {put("str1":"abc");} }(转)
Map集合的普通初始化方法: Map<String, String> map = new HashMap<String, String>(); map.put("Na ...