一、基本的border-radius属性
使用CSS的border-radius属性可以实现对元素的圆角处理，该属性可以接受一个或多个值来表示每个角的圆角程度，如：
/*在一个元素上同时设置四个角的圆角*/
div{
border-radius: 10px;
}
/*分别设置四个角的圆角*/
div{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
使用这种方式设置的圆角较为简单，但是它只适合实现简单的圆角效果，而且圆角的大小是固定的，无法实现动态调整大小的效果。
二、使用JS插件实现动态圆角
借助第三方JS插件，可以通过JS代码来动态处理元素的圆角效果，其中比较常用的插件是jquery-corner。
/*引入jquery和jquery-corner插件*/
/*在需要圆角处理的元素上调用corner()函数*/
$("div").corner();
该插件的使用非常简单，只需要在需要圆角处理的元素上调用corner()函数即可，同时还可以传递一些参数来控制圆角的大小与样式。
三、CSS3的clip-path属性
CSS3的clip-path属性可以实现比较灵活的圆角处理，而且可以实现动态调整圆角大小的效果。
/*在需要圆角处理的元素上应用clip-path属性*/
div{
-webkit-clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
}
使用CSS3的clip-path属性需要设置具体的路径来实现圆角处理，这个过程可能较为繁琐，但是可以比较灵活地实现不同大小的圆角效果。
四、HTML5的canvas画布
最后一种实现图像圆角效果的方法是使用HTML5的canvas画布，通过JS代码生成圆角图片并显示在页面上。
/*绘制圆角图片的方法*/
function drawCornerImage(imageUrl, canvasId, radius){
var canvas = document.getElementById(canvasId);
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = imageUrl;
img.onload = function(){
ctx.beginPath();
ctx.moveTo(radius, 0);
ctx.lineTo(canvas.width - radius, 0);
ctx.quadraticCurveTo(canvas.width, 0, canvas.width, radius);
ctx.lineTo(canvas.width, canvas.height - radius);
ctx.quadraticCurveTo(canvas.width, canvas.height, canvas.width - radius, canvas.height);
ctx.lineTo(radius, canvas.height);
ctx.quadraticCurveTo(0, canvas.height, 0, canvas.height - radius);
ctx.lineTo(0, radius);
ctx.quadraticCurveTo(0, 0, radius, 0);
ctx.closePath();
ctx.clip();
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
}
/*在页面上显示圆角图片*/
drawCornerImage('image.png', 'myCanvas', 20);
使用canvas进行圆角处理的过程较为复杂，需要用到JS绘图API对图片进行裁剪和绘制，但是具有比较广泛的适用范围。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/156531.html
微信扫一扫 
支付宝扫一扫 