摘要:
下文讲述使用css脚本在页面上绘制一个“放大镜”形状的方法分享,如下所示:
在html页面的开发中，常需要放入一个“放大镜”,用于实现字体或图片放大的导航,那么如何使用css代码在html上绘制“放大镜”形状呢？
实现思路:
1.绘制一个圆环
2.绘制一个长方形–然后对长方形进行旋转制作为放大镜的手柄
如下所示:
例:
使用css绘制一个“放大镜”形状的示例分享
maomao365.com
css 绘制 "放大镜" 示例分享
----
将div转换为“放大镜”形状的方法分享
#fangdajing {
font-size: 10em;
display: inline-block;
width: 0.4em;
box-sizing: content-box;
height: 0.4em;
border: 0.1em solid green;
position: relative;
border-radius: 0.35em;
}
#fangdajing:before {
content: "";
display: inline-block;
position: absolute;
right: -0.25em;
bottom: -0.1em;
border-width: 0;
background:green;
width: 0.35em;
height: 0.08em;
transform: rotate(45deg);
}
css输出放大镜形状的示例分享