CSS border-radius最全使用合计

公司前端开发转正申请个人总结|微信小程序的前端开发|前端开发怎么找练手项目

语法和解释

border-radius可以通过值来定义样式相同的角,也对每个角分别定义。下面的表格解释了各个写法所表示的效果。

语法 解释{:1_417:}
border-radius:10px 将创建四个大小一样的圆角,如图1和2。
border-radius:10px 15px 10px 5px; 四个值分别表示左上角、右上角、右下角、右下角。
border-radius:10px 15px; 第一个值表示左上角、右下角;第二个值表示右上角、左下角。
border-radius:10px 15px 5px; 第一个值表示左上角;第二个值表示右上角、左下角;第三个值表示右下角。
border-bottom-left-radius:20px 10px; 创建不对称的角–椭圆角。
border-radius:20px/10px; 写椭圆角的时候,可以用短写法,创建四个一样的椭圆角。
border-radius:10px 20px 30px 40px 四个值分别表示四个角的半径(水平和垂直半径一样),如图11。
border-radius:10px 20px 30px 40px/20px 50px 30px 10px; 斜杠前面的一组四个值分别表示四个角的水平半径;斜杠后面的一组四个值分别表示四个角的垂直半径。如图7。
border-radius:10px 20px 40px/20px 50px; 斜杠前面和后面每一组分别表示的是四个角水平半径和四个角垂直半径。两个值、三个值的顺序规则你懂的哈。

对于每个角的两个值,分别代表的是该角的水平方向和垂直方向的半径。若有四个值,上面表格有解释。看下面这个图,或许会清晰些。

border-radius最全的使用说明

边框大小和外半径、内半径的关系

实际的内半径相当于外半径减去相应的边框大小。相减的值中如果至少一个为为负值或零,则内半径为直角。
不管怎样,相邻的两个边都会形成流畅的线条。

border-radius最全的使用说明

兼容Firefox老的版本

为了兼容Firefox3.6及以下版本,需要写上供应商前缀,为-moz-border-radius:5px,对于每个角的语法,则为:-moz-border-radius-topleft:5px;要特别注意这与标准写法不同。

web前端开发怎么样|微信 前端 开发 zhihu|网页前端开发工具排行

» 本文来自:前端开发者 » 《CSS border-radius最全使用合计》
» 本文链接地址:https://www.rokub.com/5239.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!