`
奥义之舞
  • 浏览: 284405 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

圆角DIV 并且不用图片

 
阅读更多 
<html>
<head>
    <title>
    不用图片的DIV圆角(修改自一欧洲网站)
    </title>   
<style type="text/css">
body {
    background-color: #FFF;
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    font-family: Georgia;
    text-align:center;
}
div.rounded-box {
    position:relative;
    width: 9em;
    background-color: #eee;
    margin: 3px;
}
/*********************
全DIV的CSS设置
*********************/
div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px; background-color:#FFF; overflow:hidden;}
div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; color:#eee; line-height: 40px;}
/*********************
单独的DIV的CSS设置
*********************/
div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}
div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}
div.box-contents {
    position: relative; padding: 18px; color:#f6f; font-size:10.5pt;text-align:left;/*修改PADDING可以调节内容和园角的位置关系*/
}
#wid400 {width:400px} /*定义单独的ID属性可以调整整个圆角DIV的宽度*/
</style>
</head>
<body>
<div class="rounded-box">
    <div class="top-left-corner"><div class="top-left-inside">&#8226;</div></div>
    <div class="bottom-left-corner"><div class="bottom-left-inside">&#8226;</div></div>
    <div class="top-right-corner"><div class="top-right-inside">&#8226;</div></div>
    <div class="bottom-right-corner"><div class="bottom-right-inside">&#8226;</div></div>
    <div class="box-contents">
        DIV内容<br>
        DIV内容<br>
        DIV内容<br>
        DIV内容<br>
        DIV内容<br>
        DIV内容<br>
    </div> <!-- end div.内容-->
</div> <!-- end div.圆角 -->

<!-- 又一个圆角DIV,ID为WID400,是指宽度400 -->
<div class="rounded-box" id="wid400">
    <div class="top-left-corner"><div class="top-left-inside">&#8226;</div></div>
    <div class="bottom-left-corner"><div class="bottom-left-inside">&#8226;</div></div>
    <div class="top-right-corner"><div class="top-right-inside">&#8226;</div></div>
    <div class="bottom-right-corner"><div class="bottom-right-inside">&#8226;</div></div>
    <div class="box-contents">
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
       1


  
  

    
      
        
    
          
  • a.rar (908 Bytes)
    • 
          
  • 描述: 源码下载
    • 
          
  • 下载次数: 36
    • 
        

      
    
    
  




  

    
    
分享到：
      
      
    

  


  

    

      
      |
      sc详解
    

  

  

        
  

    
  

    
评论

    
    

  

    1 楼
    lic0112
    2012-07-30  
    
    
  

  
技巧关键在于&#8226;代表一个原点字符





    
    
  


  

    
发表评论

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

      

  

  





  

    
相关推荐

    
    
    
        
        
    
          
    
            
            
    
              
                
                
                
    
                  
    
                    
                      超实用div圆角样式，无须图片
                    
                  
    
                  
    传统的实现div圆角效果通常需要借助图像或CSS精灵图，但随着CSS3的出现，我们可以使用纯CSS来创建圆角效果，无需任何图片。这种方式不仅提高了效率，减少了HTTP请求，还能更好地适应响应式设计。以下是对"超实用div...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      JS圆角DIV
                    
                  
    
                  
    在网页设计中，"JS圆角DIV" 是一个常见的需求，尤其在CSS3之前的时期，因为CSS3之前的标准不支持直接设置元素的圆角。JavaScript（JS）被用来弥补这一功能缺失，通过动态创建和修改DOM元素的样式来实现圆角效果。...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      无需图片实现div圆角
                    
                  
    
                  
    ### 无需图片实现div圆角  #### 背景与目的  在网页设计中，圆角效果被广泛应用于各类元素中，以增加视觉吸引力并提升用户体验。传统的圆角实现方式通常依赖于背景图像，这种方式虽然直观，但在响应式布局、性能优化...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      div+css呈现圆角层示例
                    
                  
    
                  
    在这个特定的案例"div+css呈现圆角层示例"中，我们将探讨如何利用CSS技术创建具有圆角边框的`div`层，而无需依赖背景图片。这种技术对于提升网页的可读性和美观性至关重要，因为它可以减少HTTP请求，提高页面加载...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      使用Div+CSS纯图片实现圆角矩形的方法小结
                    
                  
    
                  
    通过设置左右圆角div的浮动，并使用`margin`属性使得主体div挤压出透明的部分，使得下面的背景能够显示出来。  HTML代码示例： ```html &lt;div class="newFloatMethod"&gt;  &lt;div class="left"&gt;&lt;/div&gt;  &lt;div class="right...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      实现div圆角的几种方式（有附件）
                    
                  
    
                  
    这些属性配合`border-radius`可以创建出带有圆角的背景图片效果，适用于图片背景固定的div。  最后，对于动态改变div圆角大小的需求，可以利用JavaScript或jQuery来操作`border-radius`的值。例如，当用户触发某个...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      jquery 圆角遮罩图片实现图片圆角
                    
                  
    
                  
    div\"&gt;&lt;img src=\"...\"&gt;&lt;/div&gt;")`这行代码会在类名为`.kuang`的元素之后插入一个新的`&lt;div&gt;`作为遮罩层，并且在这个遮罩层内部再嵌套一个`&lt;img&gt;`元素，其`src`属性为一个Base64编码的PNG图片，该图片实际上是一个...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      div+css制作圆角矩形的原理示例解读
                    
                  
    
                  
    在网页设计中，使用div+CSS来创建圆角矩形是一种常见的方法，它利用了CSS的边框和背景属性来模拟圆角效果。在没有CSS3之前，由于浏览器的兼容性问题，这种方法尤为流行。本篇文章将深入解析如何通过div+CSS实现圆角...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      超简单！使用CSS制作圆角表格  3步搞定
                    
                  
    
                  
    通过这种方式，我们可以确保每个部分都有其特定的样式，并且整个表格呈现出美观的圆角效果。  ### 总结  通过以上三个简单的步骤，我们可以利用CSS轻松地为网页中的表格添加圆角效果，不仅提升了视觉美感，还增强了...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Div + CSS一些特效使div变成圆角、提交按钮的特效等等
                    
                  
    
                  
    总结一下，Div+CSS技术在网页设计中扮演着重要角色，它不仅能够帮助我们实现灵活的布局，还能通过CSS3的新特性，如`border-radius`，创造出美观的界面效果，如圆角div和具有视觉吸引力的提交按钮。为了确保跨浏览器...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      纯DIV+CSS实现圆角代码
                    
                  
    
                  
    2. **背景图片**：在CSS3之前，一种常见的做法是使用背景图像，通常是一个包含圆角的透明PNG图片，通过调整背景位置来模拟圆角效果。  3. **多层元素**：如内容中所示，通过创建多个内部`p`标签并调整它们的边距和...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      用CSS实现圆角框框
                    
                  
    
                  
    早期的CSS版本（如CSS2）并不支持直接创建圆角效果，因此开发者通常会借助背景图片或者复杂的布局技巧来实现这一效果。然而，随着CSS3的到来，创建圆角边框变得异常简单，只需要利用`border-radius`属性即可。  ####...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      NiftyCube.rar_javascript_niftycu_niftycube_圆角
                    
                  
    
                  
    3. 兼容性：对于不支持CSS3的浏览器（如IE6-8），NiftyCube可能使用JavaScript库如jQuery的插件来模拟圆角效果，通过添加额外的div层或图片来实现。  4. 性能优化：高性能的JavaScript圆角实现会考虑到渲染效率，...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      border-radius以外的CSS圆角边框制作方法
                    
                  
    
                  
    3. 设置四个圆角div的宽度和高度，使其与所用圆角图片的尺寸相匹配。  具体实现代码如下：  ```html &lt;div class="content"&gt;  &lt;div class="top-left"&gt;&lt;/div&gt;  &lt;div class="top-right"&gt;&lt;/div&gt;  &lt;div class="btm-left"&gt;...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      CSS高级技巧:圆角矩形
                    
                  
    
                  
     对于固定宽度、颜色单一的圆角矩形，可以使用两张图片（顶部和底部）结合内填充来实现。HTML结构中包含一个包裹元素（`.wrapper`）和内容元素（如`&lt;h1&gt;`和`&lt;p&gt;`）。背景图片与容器颜色相同，通过设置内填充来确保...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      最简洁实用的图片插入网页代码
                    
                  
    
                  
    下面我们将详细讨论如何使用这些技术来实现图片的插入，并且介绍一些具体的代码示例。  ### 一、HTML中的图片插入  #### 1.1 静态图片插入 在HTML中插入图片最常见的方法是使用`&lt;img&gt;`标签。这个标签非常简单易用，...
    
                
    
                
              
            
    
          
    
        
    
    

  





  
    Magicbox
  













      

      
        

          

            

              

                

                
              

            

            


            

          

        

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics