纯CSS+DIV实现圆角的三种方法(create a round corner DIV by pure CSS)

方法一:使用"•"来当圆角:

 

 

ContractedBlock.gif ExpandedBlockStart.gif Code
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    
<title>title>

    
<script type="text/javascript">
      
function doResize()
      {
           document.getElementById(
"box-contents").style.height=(document.documentElement.clientHeight-60)+"px";
      }
      window.onresize 
= doResize;
    
script>

    
<style type="text/css">
        body
        
{
            background-color
: black;
            margin
: 0px;
            padding
: 0px;
            color
: White;
            font
: 16px arial;
        
}
        #content
        
{
            margin
: auto;
            width
: 780px;
            height
: 100%;
            padding
: 0 0;
        
}
        div.rounded-box
        
{
            position
: relative;
            background-color
: red;
            margin
: 3px;
            width
: 780px;
            padding
: 0 0;
        
}
        
/********************* 
GLOBAL ATTRIBUTES 
********************
*/div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
        
{
            position
: absolute;
            width
: 20px;
            height
: 20px;
            background-color
: black;
            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
: red;
            line-height
: 40px;
        
}
        
/********************* 
SPECIFIC ATTRIBUTES 
********************
*/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
: 8px;
            color
: white;
        
}
    
style>
head>
<body onload="doResize();">
    
<div id="content">
        
<span>Headerspan>
        
<div class="rounded-box">
            
<div class="top-left-corner">
                
<div class="top-left-inside">
                    •
div>
            
div>
            
<div class="bottom-left-corner">
                
<div class="bottom-left-inside">
                    •
div>
            
div>
            
<div class="top-right-corner">
                
<div class="top-right-inside">
                    •
div>
            
div>
            
<div class="bottom-right-corner">
                
<div class="bottom-right-inside">
                    •
div>
            
div>
            
<div class="box-contents" id="box-contents">
                Contents go here, but it must be at least two lines to look any good.
                
<br>
                Contents go here, but it must be at least two lines to look any good.
                
<br>
                Contents go here, but it must be at least two lines to look any good.
                
<br>
            
div>
            

        
div>
        

        
<span>Footerspan>
    
div>
body>
html>

 

方法二:

来自:http://www.cnblogs.com/scgw/articles/927682.html

 

 

ContractedBlock.gif ExpandedBlockStart.gif Code
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    
<style type="text/css">
        u.corner u
        
{
            height
: 1px;
            font-size
: 1px;
            display
: block;
            overflow
: hidden; /*author: meizz*/
            text-decoration
: none;
            background-color
: green;
        
}
        u.corner u.h1
        
{
            margin
: 0 5px;
        
}
        u.corner u.h2
        
{
            margin
: 0 3px;
        
}
        u.corner u.h3
        
{
            margin
: 0 2px;
        
}
        u.corner u.h4
        
{
            margin
: 0 1px;
            height
: 2px;
        
}
    
style>
    
<head>
        
<body>
            
<div>
                
<class="corner"><class="h1">u><class="h2">u><class="h3">u><class="h4">
                
u>u>
                
<div style="background-color: green; height: 200">
                    content
div>
                
<class="corner"><class="h4">u><class="h3">u><class="h2">u><class="h1">
                
u>u>
            
div>
        
body>
html>

 

 

方法三:

 

来自:http://www.cnblogs.com/pointdeng/articles/1171323.html

 

 

ContractedBlock.gif ExpandedBlockStart.gif Code
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    
<title>无标题页title>
    
<style>
        .up1
        
{
            overflow
: hidden;
            height
: 1px;
            margin-left
: 4px;
            margin-right
: 4px;
            background-color
: Aqua;
            border-left
: solid 1px Aqua;
            border-right
: solid 1px Aqua;
        
}
        .up2
        
{
            overflow
: hidden;
            height
: 1px;
            margin-left
: 3px;
            margin-right
: 3px;
            border-left
: solid 1px Aqua;
            border-right
: solid 1px Aqua;
        
}
        .up3
        
{
            overflow
: hidden;
            height
: 1px;
            margin-left
: 2px;
            margin-right
: 2px;
            border-left
: solid 1px Aqua;
            border-right
: solid 1px Aqua;
        
}
        .content
        
{
            margin-left
: 1px;
            margin-right
: 1px;
            height
: 100px; /*这里控件高度*/ /*background-color: Aqua;*/
            border-left
: solid 1px Aqua;
            border-right
: solid 1px Aqua;
        
}
        .down1
        
{
            overflow
: hidden;
            height
: 1px;
            margin-left
: 2px;
            margin-right
: 2px;
            border-left
: solid 1px Aqua;
            border-right
: solid 1px Aqua;
        
}
        .down2
        
{
            overflow
: hidden;
            height
: 1px;
            margin-left
: 3px;
            margin-right
: 3px;
            border-left
: solid 1px Aqua;
            border-right
: solid 1px Aqua;
        
}
        .down3
        
{
            overflow
: hidden;
            height
: 1px;
            margin-left
: 4px;
            margin-right
: 4px;
            background-color
: Aqua;
            border-left
: solid 1px Aqua;
            border-right
: solid 1px Aqua;
        
}
        .cell
        
{
            width
: 50px; /*这里控制宽度*/
        
}
    
style>
head>
<body>
    
<div class="cell">
        
<div class="up1">
        
div>
        
<div class="up2">
        
div>
        
<div class="up3">
        
div>
        
<div class="content">
            这里放内容
        
div>
        
<div class="down1">
        
div>
        
<div class="down2">
        
div>
        
<div class="down3">
        
div>
    
div>
body>
html>

 

 

 

转载于:https://www.cnblogs.com/blodfox777/archive/2008/09/02/1282141.html

你可能感兴趣的:(纯CSS+DIV实现圆角的三种方法(create a round corner DIV by pure CSS))