专注前端行业精选
Css3圆角 border-radius属性介绍以及使用
作者:鹏仔先生日期:2020-06-02浏览:254分类:CSS
语法:
border-radius: 数值+单位;
1. 设置一个值
border-radius: 20px;
四个方向的圆角均为20px
2. 设置两个值
border-radius: 10px 50px;
左上角和右下角为10px; 右上角和左下角为50px
3. 设置三个值
border-radius: 10px 100px 50px;
左上角为10px; 右上和左下为100px; 右下为50px
4. 设置四个值
border-radius: 0px 10px 50px 100px;
顺时针方向依次为左上,右上,右下,左下
5. 用斜杠来设置第二组值
border-radius: 100px/50px;
第一组值代表四个方向的水平半径都为100px; 第二组值代表四个方向的垂直半径都为50px
6. 还可以单独设置某一个方向的圆角
左上角
border-top-left-radius: 10px;
右上角
border-top-right-radius: 10px;
右下角
border-bottom-right-radius: 10px;
左下角
border-bottom-left-radius: 10px;
注:
border-top-left-radius: 50px 10px;
左上角圆角的水平半径为50px,垂直半径为10px
7. 设置为圆形
border-radius: 50%;
手机扫码访问
猜你还喜欢
- 02-25 JS判断某个时间戳是否为当天时间
- 02-07 vue使用viewerjs实现图片点击放大
- 02-05 vue实现点击刷新页面 H5实现刷新页面
- 02-04 H5移动端项目实现手写签名功能 vue实现手写签名
- 02-04 vue移动端使用Vconsole Vconsole使用
- 02-04 vue中如何点击返回上一页,vue判断没有上页返回首页
- 11-25 小程序中 时间戳转日期格式(年月日时分秒)封装使用
- 11-25 小程序中button的边框无法去除 button边框如何去除
- 11-19 微信小程序 接口请求封裝
- 11-06 VUE中实现输入框禁止输入小数方法分享
- 10-29 vue表单验证 input输入框禁止输入空格
- 10-27 iView 日期时间选择器设置开始时间至结束时间限制
暂无评论,来添加一个吧。