如何在不使用JS的情况下在div中心挖一个洞

最新推荐文章于 2022-10-08 09:17:37 发布
最新推荐文章于 2022-10-08 09:17:37 发布
阅读量2.5k 收藏
点赞数
分类专栏： 技术 前端 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38516533/article/details/79733565
版权

如何在不使用JS的情况下在div中心挖一个洞


前一段时间，我在论坛上看见一个2015年的帖子，说如何利用css在div中间挖一个洞。这个渐变大家想必都有很多方法办到，但是这个洞就疑惑了。求助的兄弟如图。


恰巧我面试的一家要招45k的前端工程师也出了一个这个问题。这家公司出了很多题，不像别的公司一问就是各种js的问题，各种架构，框架……

但是我脑子想了一段时间，觉得canvase就可以完美解决，但是只让使用css所以我就有些疑惑了。

这就类似于一个扫码的手机功能，周围半透明遮罩相机画面，中间全透明部分显示扫描的二维码。

所以我想到了这个方法，border！

在定义border颜色的时候，我们可以为他加一个border:200px solid rgba(0,0,0,0.7);

这样就有了类似微信的那种效果。

如果想要那种渐变的可以使用背景图或者css3渐变来实现

Pianoboy前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript之DIV拖动类 支持在FF下拖动,调用简单
10-30
javascript之DIV拖动类 支持在FF下拖动,调用简单
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 1998
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
两个DIV中间有空隙_不紧靠,白色缝隙,ie6中的3像素bug
weixin_34194702的博客
11-30 725
好不容易，今天找到了个关于DIV+CSS的教程，本来想学着做下拉框的，可是，下拉框，虽然，DIV可以做一点，但是还是要通过JS来调节。哎，看来，还得学JS。真是盐城网站优化学无止尽啊。还好，在DIV+css里，学到了一点东西，了解到了。IE6中的3像素BUG，什么叫，3像素BUG呢。就是，当浮动元素和非浮动元素相邻时，也可以称作为两DIV，一个浮动，一个不浮动的时候，他们...
消除两个div中间的空隙
热门推荐
Sbangm的专栏
05-20 1万+
<br />早上排版的时候，碰到这个问题，就是两个div浮动后中间老是有一条白色的空隙，弄了好久，终于搞定了，做法如下：<br />1、首先把div样式设为浮动(style="float:...")，假如我有两个div吧(div1和div2)，把div1设置为style="float:left",第二个可以不设<br />2、在div1的样式再加上这个属性“_margin-right:-3px”，注意前面有下划线“_”<br />示例：<div id='div1' style='float:left;_ma
html实现边框缺一块的效果
大把小米的博客
02-28 720
如图，要实现这种效果最简单的方法就是fieldset标签+legend标签 <fieldset> <legend>姓名</legend> <div> 内容 </div> </fieldset> fieldset 有几种特别的样式方案。 它的 display 值默认为 block，因此建立了一个块级格式化上下文。如果将 fieldset 的 display 值设置为行内级别，则会表现为 inli.
CSS基础：div设置透明度、圆角、投影
幼发拉底
06-14 9020
CSS基础：div设置透明度、圆角、投影 1. 技巧预览 2. 实战出技术 2.1 设置透明度 2.2 圆角 2.3 投影 1. 技巧预览 设置透明度； 圆角； 投影； 2. 实战出技术2.1 设置透明度 效果预览 图2.1 不透明效果预览 图2.2 不透明度为50%效果预览 代码展示 <!DOCTYPE html> <html> <head> <tit
Html 点透镂空遮罩,swift 实现遮罩部分区域“挖洞”效果和点击事件穿透
weixin_33464176的博客
05-31 538
在日常开发中有时候我们需要在APP中做用户指导，比如第一次进入某个页面的时候显示遮罩覆盖， 但是又需要将遮罩下的某些区域暴露出来，便于文字说明，比如我们需要在视图上加个遮罩，并且遮罩上要显示 按钮2 ：原图期待的效果图：按钮1被盖住，而 按钮2显示出来效果我们可以 在视图上加个遮罩，再往遮罩上画一个同样位置和样式的 按钮2 ，作为一个有追求的程序猿，我们是不能容忍这种 低效实现方式的。我们可以通...
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
10-22
本文将详细介绍如何使用jQuery判断Div是否在可视区域，以及如何判断Div是否隐藏。 首先，我们来看如何判断Div是否在可视区域。以下是一个示例代码： ```html <!DOCTYPE html> <title>jQuery 判断 Div 可视区域 ...
JS实现固定在右下角可展开收缩DIV层的方法
10-24
主要介绍了JS实现固定在右下角可展开收缩DIV层的方法,右下角的div层可实现收缩与展开的功能,非常具有实用价值,需要的朋友可以参考下
js如何设置在iframe框架中指定div不显示
10-26
以下是一些使用JavaScript实现这一功能的方法，以满足在不同上下文中控制`div`可见性的需求。 首先，我们来看一下提供的代码示例。这段HTML和JavaScript代码演示了如何通过检测当前页面是否在`iframe`中来决定`div`...
在一个页面重复使用一个js函数的方法详解
10-20
在网页开发中，有时我们需要在同一个页面上多次使用相同的JavaScript函数，以处理多个相似的交互事件。本篇文章将详细讲解如何实现这一目标，主要涉及HTML结构设计、CSS样式以及JavaScript事件绑定。 首先，为了...
html5自动抠图api,类似抠图、挖空效果的实现
weixin_42610010的博客
06-02 653
package {import laya.display.Sprite;import laya.display.Stage;import laya.utils.HitArea;/*** ...* @author yung*/public class LayaAirDemo {private var red:Sprite;private var box:Sprite;public function...
css中间镂空,怎么用纯CSS实现镂空效果
weixin_28938171的博客
08-03 2230
怎么用纯CSS实现镂空效果发布时间：2021-03-19 09:49:16来源：亿速云阅读：99作者：小新小编给大家分享一下怎么用纯CSS实现镂空效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！background-clip: text背景被裁剪为文字的前景色。第一次是在 CSS-Tricks 看到的这个用法: 在 CSS-Tricks 网站上，这个玩意用得到处都是。这样，做简...
vue通过css实现页面的挖空效果(某一块高亮)
qq_40591925的博客
10-08 2090
【代码】vue通过css实现页面的挖空效果(某一块高亮)
CSS实现矩形两边挖半圆
北枫林
11-27 2474
效果如图： 思路：子绝父相，通过伪元素把一个白色的圆（和背景色相同）放在矩形中心两边。 <html> <head> <style> /* top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 */ /* transform:translate(-50%,-50%); 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 */ .semi-circle {
CSS中间圆形镂空效果
lyx2049的博客
10-15 1万+
实现效果：一个div中间圆形镂空 思路：在div中用:after伪类实现一个圆环，再设置div的overflow为hidden<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> <style> .hole { width: 160px; height: 160px; position:
css实现中间镂空效果
wilL-my的博客
08-31 1274
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>镂空</title> <style> .outBox{ height:300px; width:300px; background: transparent; .
使用js写一个在页面指定位置增加div的代码
最新发布
05-27
好的，以下是使用 JavaScript 在页面指定位置增加 div 的代码： ```javascript // 获取需要添加 div 的父元素 var parent = document.getElementById("parent-div"); // 创建一个新的 div 元素 var newDiv = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值