在dive上打孔（使div上有一个透明的区域）

StudiousTiger

已于 2023-01-15 17:56:54 修改

阅读量5.5k

点赞数

文章标签： css css3 html

于 2022-01-13 13:38:58 首次发布

本文链接：https://blog.csdn.net/m0_45067620/article/details/122471919

版权

Tiger の HTML&CSS 同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

Tiger の前端实践项目

4 篇文章 0 订阅

订阅专栏

通过background-image: radial-gradient(circle at 20px, transparent 8px,rgb(255, 255, 255) 0px);实现。

circle at 20px: 确定孔的形状和位置

transparent 8px: 确定孔的颜色和大小

rgb(255, 255, 255) 0px: 确定其他区域的颜色

<!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>Document</title>
    <style>
        body{
            background: url(./images/demo.jfif);
            background-attachment:fixed;
        }
        .a{
            margin: 10px auto;
            border-radius: 6px;
            height: 100px;
            width: 800px;
            background-color: transparent;
            background-image: radial-gradient(circle at 20px, transparent 8px,rgb(255, 255, 255) 0px);
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="a"></div>
</body>
</html>

在这里插入图片描述

如果在打出的孔上没有锯齿，可以进行 radial-gradient 进行锐化处理：
在这里插入图片描述

世上无难事，是怕有心人…
在这里插入图片描述

StudiousTiger

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
在dive上打孔（使div上有一个透明的区域）

通过background-image: radial-gradient(circle at 20px, transparent 8px,rgb(255, 255, 255) 0px);实现。circle at 20px: 确定孔的形状和位置transparent 8px: 确定孔的颜色和大小rgb(255, 255, 255) 0px: 确定其他区域的颜色<!DOCTYPE html><html lang="en"><head> <meta ch
复制链接

扫一扫

专栏目录