css 圆角相框

文件都在附件,下面是代码:

代码
<!DOCTYPE html PUBLIC "./W3./DTD HTML 4.01 Transitiona./EN" "http./www.w3.org/TR/html4/loose.dtd">
<html>
    
<head>
        
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
<meta http-equiv="Content-Language" content="utf-8"/>
        
<title>Web Site</title>
        
<!--css 圆角相框 
            测试通过Firefox3.68 IE6.7.8
            作者:lonely 
            最大支持:宽450 高:560 
            最小支持:宽:50 高50 
            需要其他高度请自己修改图片并调整以下CSS参数,PSD背景在附件
            rudblbg和rudbrbg 背景直接用bottom会向下偏离8个像素左右,原因不详,知道的告诉下
        
-->
    
</head>
    
<body>
        
<style>
            .rudallbg
{
                float
:left;
                width
:100px;
            
}
            .rudtlbg
{
                overflow
:hidden;
                float
:left;
                width
:84%;
                height
:8px;
                background
:url(./rubbg.png) left top no-repeat;
            
}
            .rudtrbg
{
                overflow
:hidden;
                float
:right;
                width
:16%;
                height
:8px;
                background
:url(./rubbg.png) right top no-repeat;
            
}
            .rudccbg
{
                padding
:0px 0px 0px 8px;/*不能左右为8px,当插入图片时候IE6撑开了,可恶的IE6,还我浪费了2个多小时,这下完美解决了*/
                overflow
:hidden;
                height
:100%;
                background
:url(./rubbg.png) left  -7px no-repeat;
                border-right
:1px solid #ccc;
            
}
            .rudblbg
{
                overflow
:hidden;
                float
:left;
                width
:84%;
                height
:8px;
                background
:url(./rubbg.png) left -569px no-repeat;
            
}
            .rudbrbg
{
                overflow
:hidden;
                float
:right;
                width
:16%;
                height
:8px;
                background
:url(./rubbg.png) right -569px no-repeat;
                background
:url(./rubbg.png) right -569px no-repeat;
            
}
        
</style>
        
<div class="rudallbg">
            
<div class="rudtlbg"></div>
            
<div class="rudtrbg"></div>
            
<div class="rudccbg">
                da fas df af df da fas df af dfda fas df af dfda fas df af dfda fas df af df
                da fas df af dfda fas df af dfda fas df af dfda fas df af dfda fas df af df
                da fas df af dfda fas df af dfda fas df af dfda fas df af dfda fas df af dfda fas df af df
                da fas df af dfda fas df af dfda fas df af df
            
</div>
            
<div class="rudblbg"></div>
            
<div class="rudbrbg"></div>
        
</div>
    
</body>
</html>

附件

原文地址:https://www.cnblogs.com/liushannet/p/1808751.html