wild84
wild84
2017-10-26 08:05
采纳率: 91.6%
浏览 1.3k

不用css3,如何实现边框的圆角处理?

不用css3,如何实现边框的圆角处理?我知道就是用背景图片,还有没有其他方法?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • abcfgh
    abcfgh 2017-10-26 08:30
    已采纳

    采用svg

     <svg width="100" height="100">
        <desc>SVG圆角效果</desc>
        <defs>
            <pattern id="raduisImage" patternUnits="userSpaceOnUse" width="100" height="100">
                <image xlink:href="test.jpg" x="0" y="0" width="625" height="605" />
            </pattern>
        </defs>
        <circle cx="50" cy="50" r="50" fill="url(#raduisImage)"></circle>
    </svg>
    
    点赞 评论
  • qq_37524684
    子幽 2017-10-26 08:59
     <!DOCTYPE html>   
    <html lang="zh">   
    <head>   
        <meta charset="UTF-8">   
        <title>圆角矩形</title>   
        <style>   
            body { background: url("./images/bg3.jpg") repeat; }  
            #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
        </style>   
    </head>   
    <body>   
    <div id="canvas-warp">   
        <canvas id="canvas">   
            你的浏览器居然不支持Canvas?!赶快换一个吧!!   
        </canvas>   
    </div>   
    
    <script>   
        window.onload = function(){   
            var canvas = document.getElementById("canvas");   
            canvas.width = 800;   
            canvas.height = 600;   
            var context = canvas.getContext("2d");   
            context.fillStyle = "#FFF";   
            context.fillRect(0,0,800,600);   
    
            drawRoundRect(context, 200, 100, 400, 400, 50);   
            context.strokeStyle = "#0078AA";   
            context.stroke();   
        }   
    
        function drawRoundRect(cxt, x, y, width, height, radius){   
            cxt.beginPath();   
            cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);   
            cxt.lineTo(width - radius + x, y);   
            cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);   
            cxt.lineTo(width + x, height + y - radius);   
            cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);   
            cxt.lineTo(radius + x, height +y);   
            cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);   
            cxt.closePath();   
        }   
    </script>   
    </body>   
    </html>
    
    点赞 评论
  • liuziying35
    zy35 2017-12-26 07:21

    引用Bootstrap文件 class='img-rounded'
    另一种可以用 border-radius :20px;

    点赞 评论

相关推荐