本文摘自PHP中文网,作者藏色散人,侵删。
css实现图片圆角的方法:首先创建一个HTML示例文件;然后创建一个div元素;最后通过css3的“border-radius”属性给元素添加圆角即可。
本教程操作环境:Windows7系统、HTML5&&CSS3版本,该方法适用于所有品牌电脑。
推荐:《css视频教程》
CSS圆角
css2.1给元素添加圆角是一件很麻烦的事,老办法是用背景图片实现,制作比较麻烦。css3,border-radius的属性,使圆角属性得到完美的解决。
语法
border-radius:长度值;
说明:
长度值可以是px、百分比、em等
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
设置border-radius:10px;设置的四个圆角半径都是10px
border-radius属性值有四个写法(同margin、padding相似)
(1)border-radius:一个值;
结果如上图
(2)border-radius:两个值;
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者