前一篇文章呢,我们给大家主要讲解了css3教程-边框,顺便简单的提了一下边框的3种属性,接下来翠儿姐给大家介绍css3教程-border-radius属性,这款属性是边框的属性之一,在前端开发工作中会经常用到。欢迎大家前来了解。
给大家先看一个实例:
向 div 元素添加圆角边框:
div
{
border:2px solid;
border-radius:25px;
}浏览器支持:

立即学习“前端免费学习笔记(深入)”;
IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。
定义和用法:
border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。
提示:该属性允许您为元素添加圆角边框!

DBShop电子商务系统具备统一的系统设置、简单的商品管理、灵活的商品标签、强大的商品属性、方便的配送费用管理、自由的客服设置、独立的广告管理、全面的邮件提醒、详细的管理权限设置、整合国内外知名支付网关、完善的系统更新(可在线自动更新或手动更新)功能、细致的帮助说明、无微不至的在线教程……,使用本系统绝对是一种享受! DBShop开源电子商务网店系统采用业界知名框架 ZendFramewor
401
语法:
border-radius: 1-4 length|% / 1-4 length|%;
注释:按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

例子 1
border-radius:2em;
等价于:
border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em;
例子 2
border-radius: 2em 1em 4em / 0.5em 3em;
等价于:
border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;
以上就是css3教程-border-radius属性的内容,更多相关内容请关注PHP中文网(www.php.cn)!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号