首页 > 其他分享 >css水珠效果

css水珠效果

时间:2024-03-28 10:13:49浏览次数:19  
标签:效果 100px height css rgba 10px Document border 水珠

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
        }

        .water {
            width: 100px;
            height: 100px;
            /* border: 1px solid black; */
            border-radius: 61% 39% 57% 43% / 46% 67% 33% 54%;
            box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5),
                10px 10px 20px rgba(0, 0, 0, 0.3),
                15px 15px 30px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>

<body>
    <div class="water"></div>
</body>

</html>

 

Document

 

标签:效果,100px,height,css,rgba,10px,Document,border,水珠
From: https://www.cnblogs.com/bigharbour/p/18100895

相关文章

  • oracle中的分割函数(split效果)
     CREATEORREPLACEFUNCTIONfn_split(p_strINVARCHAR2,p_delimiterINVARCHAR2)RETURNty_str_split--分割函数--新建前要先建立ty_str_split执行语句为:CREATEORREPLACETYPEty_str_splitISTABLEOFVARCHAR2(4000);ISjINT:=0;iINT:=1;le......
  • 【Flutter 面试题】讲解一下Flutter中的动画和过渡效果
    【Flutter面试题】讲解一下Flutter中的动画和过渡效果文章目录写在前面口述回答补充说明运行结果详细说明写在前面......
  • CSS的使用——常用选择器的用法
    CSS选择器用于选择要样式化的HTML元素。下面介绍常见的CSS选择器用法。1.通配选择器*{margin:0;padding:0;}2.元素选择器h1{color:blue;}3.类选择器.my-class{font-size:16px;}4.ID选择器#my-id{background-color:ligh......
  • HTML,CSS简单命令操作
    HTML、HTML5标题标签、段落标签<h1 id="title" class="title"> 标题</h1><p> 第一个段落</p>水平线<hr>按钮标签<button>按钮</button>给按钮添加属性(效果:点击按钮则变换)注:点击效果也涉及了JavaScript<!--给按钮添加属性,使点击按钮使标题变biaodom操作-->......
  • 聊聊大模型"打字机"效果的背后技术——SSE
    SSE:ServerSentEvent;服务器发送事件。Server-SentEvents(SSE)是一种由服务器向客户端推送实时数据的技术。它是构建基于事件的、服务器到客户端的通信的一种方法,特别适用于需要实时更新和推送信息的应用场景,如实时通知、股票交易、实时游戏状态更新等。SSE的工作原理是,一旦客户......
  • 小目标检测篇 | YOLOv8改进之GSConv + Slim Neck提升小目标检测效果
    前言:Hello大家好,我是小哥谈。在文章中,作者提出了一种新方法GSConv来减轻模型的复杂度并保持准确性。GSConv可以更好地平衡模型的准确性和速度。并且,提供了一种设计范式SlimNeck,以实现检测器更高的计算成本效益。实验过程中,与原始网络相比,改进方法获得了最优秀的检测结果。......
  • 电商产品效果图渲染用什么软件好?
    在电子商务的快速发展中,产品的视觉呈现变得至关重要。对于电商行业的设计师而言,选择一款既便捷又高效的渲染工具,对于快速完成高质量的产品效果图至关重要。特别是对于初学者,工具的直观性和功能性是他们最为关注的焦点。那么,面对市场上众多的渲染软件,设计师们应如何做出明智之选,以......
  • 网页图像渐变的方法(HTML+CSS) (渐变与切换)
    网页图像渐变的方法(HTML+CSS)(渐变与切换)Date:2024.03.27参考色彩runoob-渐变色工具渐变-水平多图效果HTML<divclass="conBoxpubCon"><divclass="imgBox"><imgclass="img1"src=""/><imgclass="......
  • css的三大特性及属性
    css的三大特性及属性1.1层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠1.2继承性CSS中的继承:子......
  • Android原生ViewPager控件实现卡片翻动效果
    本文实例为大家分享了Android控件ViewPager实现卡片翻动效果的具体代码,供大家参考,具体内容如下先放一张效果图:想要实现这样的效果其实并不是太难,需要对ViewPager的一些细节属性更深入的了解和认识,下面介绍下一个小demo的实现过程:**第一步、**创建卡片viewpager适配器的i......