热门资讯
联系我们
联系人：蒋经理
手机：18089616766
电话：0851-27363688
QQ：13698401
邮箱：13698401@qq.com
地址：贵州省遵义市播州区马家湾湘源国际42栋1层6号
网络相关
帝国CMS用CSS控制图片圆角的方法（亲测可用）
作者： 点击数：发布时间：2025-09-30 20:29:07
使用CSS的border-radius属性可以实现图片圆角效果。
以下是实现图片圆角的几种常见方法：
1. 基础圆角（统一四个角）
cssCopy Code
img { border-radius: 10px; /* 所有角统一为10px圆角 */ }
2. 单独控制每个角
cssCopy Code
img { border-radius: 10px 20px 30px 40px; /* 顺序：左上 右上 右下 左下 */ }
3. 圆形图片（50%半径）
cssCopy Code
img { border-radius: 50%; /* 将图片变为圆形 */ width: 200px; /* 需要固定宽高比 */ height: 200px; }
4. 椭圆效果（非对称半径）
cssCopy Code
img { border-radius: 50% / 30%; /* 水平半径50%，垂直半径30% */ }
注意事项：
- 对于
<div>背景图，需设置overflow: hidden确保圆角裁剪生效：
cssCopy Code
div { border-radius: 10px; overflow: hidden; }
如果需要进一步调整或查看效果，可以告诉我具体的应用场景！
客服