`
accpxudajian
  • 浏览: 456459 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css实现shadow窗口

 
阅读更多

 

/*关键点：
 1 半透明的兼容写法：opacity:0.5,filter:alpha(opacity:50);
 2 z-index:要想z-index起作用必须给dom元素添加position:absolute;
 3 窗口遮挡效果的实现：shadow的div添加：display="display" 不是disabled */


 


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>shadow窗口</title>
<style>
	.shadow{
		opacity:0.5 !important;/*关键*/
		padding:0px;
		margin:0px;
		position:absolute;/*关键*/
		top:0px;
		left:0px;
		z-index:100;/*关键*/
		width:100%;
		height:100%;
		background:gray;/*关键*/
		filter:alpha(opacity:50);/*关键*/
	}
</style>
</head>

<body style="border:1px solid red;padding:0px;margin:0px;">
<div class="shadow" readonly="readonly"></div>
<input type="button" value="alert('aaaaaaaaaaa')" onclick="alert('aaaaaaaaaaa')">
<div style="z-index:20000;position:absolute;top:20%;left:30%;">
<input type="button" value="alert('bbbbbbbbbbbbbb')" onclick="alert('bbbbbbbbbbbbbb')">
</div>
</body>
</html>


  
  

    
      
        
      
    
      
        
    
          
    • 
          
          
  • 大小: 9.6 KB
    • 
        

      
    
    
      
    
  




  

    
    
分享到：
      
      
    

  


  

    

      
      |
      js杂记
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论 

      

  

  





  

    
相关推荐

    
    
    
        
        
    
          
    
            
            
    
              
                
                
                
    
                  
    
                    
                      CSS3实现带阴影边框效果弹出窗口
                    
                  
    
                  
    2. **阴影效果**：CSS3中的`box-shadow`属性是实现阴影边框的关键。它接受几个参数，如水平偏移、垂直偏移、模糊半径、阴影颜色等，通过调整这些参数可以创建各种不同风格的阴影效果。  3. **过渡效果**：`...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      CSS3实现14款窗口通知卡片样式.rar
                    
                  
    
                  
    本资源"CSS3实现14款窗口通知卡片样式.rar"提供了一组用CSS3实现的窗口通知卡片效果，非常适合用于网站上的消息提示、通知或者警告信息的展示。这些样式不仅美观，而且实用，可以轻松集成到现有的网页项目中，并且...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      css3带阴影弹出窗口.zip
                    
                  
    
                  
    在描述中提到，这个弹出窗口是基于CSS3和jQuery实现的。jQuery是一个广泛使用的JavaScript库，它简化了JavaScript的DOM操作、事件处理以及动画效果。通过结合CSS3和jQuery，开发者可以创建动态且响应式的用户界面，...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      CSS3实现MacBook苹果笔记本特效特效代码
                    
                  
    
                  
    【CSS3实现MacBook苹果笔记本特效特效代码】是一种利用现代Web技术，特别是CSS3，来创建逼真的MacBook苹果笔记本电脑视觉效果的编程实践。在Web设计领域，这样的特效能够提升用户体验，为网站添加生动有趣的元素，...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      css+div圆角窗口
                    
                  
    
                  
     创建圆角窗口时，可能还需要用到其他的CSS3特性，如阴影（`box-shadow`）、渐变（`linear-gradient`或`radial-gradient`）、背景裁剪（`background-clip`）等，以增加视觉效果。  5. **响应式设计**：  在移动优先...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      使用html+css+js实现自定义弹出对话框/输入框
                    
                  
    
                  
    在实现弹出对话框时，我们需要创建一个包含对话框元素的容器，例如`&lt;div&gt;`，并设置相应的ID或类名以便于CSS和JavaScript操作。例如：  ```html   自定义对话框  请输入内容"&gt;  关闭  ```  接着，CSS（Cascading ...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      CSS3实现不规则排列lightbox效果
                    
                  
    
                  
    5. **Position: fixed**：在实现lightbox效果时，通常会将弹出的图片设置为`position: fixed`，使其相对于浏览器窗口定位，这样无论滚动页面，图片始终位于屏幕中央。  6. **Opacity 和 visibility**：控制元素的...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      很酷的CSS3多窗口邮件阅读器
                    
                  
    
                  
    【描述】：这个CSS3多窗口邮件阅读器的设计和实现充分利用了CSS3的新特性，如动画效果、过渡、变换和Flexbox布局等，以创建一个动态且响应式的用户界面。邮件阅读器可能包括各种功能，如邮件分类、搜索、标记、删除...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      CSS3实现带阴影边框效果弹出窗口.zip
                    
                  
    
                  
    在本资源"CSS3实现带阴影边框效果弹出窗口.zip"中，包含了一系列用于创建具有阴影边框效果的弹出窗口的代码和技术。这个压缩包主要包括四个文件：index.html、css、js和images，它们共同协作实现了这个功能。下面...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      css3实现金融交易窗口登录页面代码.zip
                    
                  
    
                  
    【标题】"CSS3实现金融交易窗口登录页面代码"揭示了使用CSS3技术来创建一个专为金融交易设计的登录界面。CSS3是层叠样式表（Cascading Style Sheets）的最新版本，它提供了丰富的样式功能和效果，使得网页设计更加...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      基于html5+css3实现的精美聊天界面demo
                    
                  
    
                  
    标签"css3-chart-window"可能指的是界面中包含了一个图表窗口，CSS3可以用于定制图表的样式，如数据点的形状、颜色，以及图表轴的样式。使用`linear-gradient`或`radial-gradient`可以创建独特的背景效果，增强图表...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      模仿windows窗口DIV+CSS
                    
                  
    
                  
    6. **CSS3特效**：Windows Vista的Aero效果可以通过CSS3的阴影(`box-shadow`)、渐变(`linear-gradient`)等属性来实现，增加视觉深度和立体感。  7. **响应式设计**：为了适应不同设备和屏幕尺寸，可以使用媒体查询(`...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      qt 实现阴影窗口
                    
                  
    
                  
    在Qt框架中，实现窗口阴影效果是通过QSS（Qt Style Sheets）或者使用Qt的图形视图框架（Graphics View Framework）来达成的。Qt QSS类似于网页开发中的CSS，允许我们对Qt界面进行样式定制，包括添加阴影效果。而...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      CSS实现自适应的图片背景边框.rar
                    
                  
    
                  
    "CSS实现自适应的图片背景边框"这个主题着重探讨如何使用CSS技术来创建一个能够根据屏幕尺寸自动调整的图片背景边框。在JavaScript标签的提示下，我们可能会涉及到一些动态调整或交互效果的实现。下面将详细讨论这个...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      用CSS实现跟随滚动条漂浮层代码
                    
                  
    
                  
    在本教程中，我们将探讨如何仅使用CSS来实现这一功能，无需JavaScript的介入。这对于保持页面性能和减少代码复杂性非常有益。  首先，我们需要理解CSS中的`position`属性。这个属性控制元素在文档中的定位方式。为了...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      css3和js点击按钮弹出模态窗口动画效果
                    
                  
    
                  
    例如，你可以通过CSS3的`transition`属性创建平滑的打开和关闭动画，通过`transform`属性改变窗口大小或位置，使用`box-shadow`添加动态阴影效果，提升用户体验。  JavaScript则负责模态窗口的交互逻辑，如监听用户...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      纯css控制内容随滚动条滚动，可放任意位置
                    
                  
    
                  
    这个需求可以通过纯CSS来实现，无需借助JavaScript或者其他复杂的技术手段。标题“纯css控制内容随滚动条滚动，可放任意位置”以及描述中的“纯CSS实现客服悬浮窗，随浏览器滚动而滚动。可任意自定义位置。代码简洁...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      CSS3会员登录窗口模板.zip
                    
                  
    
                  
    【CSS3会员登录窗口模板.zip】是一个包含使用CSS3技术设计的会员登录界面的资源包。这个模板提供了现代化、互动性的用户体验，适用于各种网站和应用的登录页面。CSS3是层叠样式表（Cascading Style Sheets）的第三个...
    
                
    
                
              
            
    
          
    
        
    
    

  





  
    Magicbox
  













      

      
        

          

            

              

                

                
              

            

            


            

          

        

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics