圆角边框

完整形式8参数

border-radius : 右上角的水平左上角的水平左下角的水平右下角的水平 / 右上角的垂直左上角的垂直左下角的垂直右下角的垂直;

例子

讲解

这里只举例右上角水平和右上角垂直，其他角同理。效果可以这样理解
只有一个右上角垂直长度，没有右上角水平长度的也不能构成一个弧度

4参数

border-radius : 右上角弧度左上角弧度左下角弧度右下角弧度

3参数

border-radius : 右上角弧度左上角和右下角弧度左下角弧度

2参数

border-radius : 右上角和左下角弧度左上角和右下角弧度

1参数

border-radius : 所有角弧度

配合使用

理解

“/” 分割左右两边即左边为水平右边为垂直

左边又是两个参数即右上和左下的水平左上和右下的水平
右边又是一个参数即所有角的垂直

综上：右上水平50 左上水平20 左下水平50 右下水平20 / 右上垂直80 左上垂直80 左下垂直80 右下垂直80

详解border-radius属性相关推荐

详解CSS float属性
转自:http://luopq.com/2015/11/08/CSS-float/ \详解CSS float属性 Posted on 2015-11-08 | In CSS | 5条评 ...
layui添加复选框_对layui初始化列表的CheckBox属性详解，初始化属性
对layui初始化列表的CheckBox属性详解,初始化属性通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式 ...
【AndroidManifest.xml详解】Manifest属性之versionCode,versionName
Android:versionCode是什么? android:versionCode表示该软件的版本号,对用户是不可见的,它必须是一个int型的整数,它的大小代表该软件版本升级过多少次,因此每次发布 ...
UE4 C++入门之路4-PostInitProperties函数详解（设置属性默认值的四种方法）
PostInitProperties函数详解前言设置属性默认值的四种方法一声明时赋值二构造函数赋值三构造函数初始化列表四 PostInitProperties 前言也许在工作或者学 ...
css详解background八大属性及其含义
background(背景) 以前笔者在css盒模型以及如何计算盒子的宽度一文中提到过盒模型可以看成由元素外边距(margin).元素边框(border).元素内边距(padding)和元素内容(c ...
css中float详解,CSS浮动属性Float详解？史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
一些实用博客的分享（ES6详解，echart属性详解）
推荐一个ES6的学习博客(阮老师的ES讲解) 大家如果是学习ES6的话,强烈推荐下面这个阮老师的讲解,都是对比分析,比较清楚易懂!!! 博客地址:http://es6.ruanyifeng.com/# ...
Android开发之EditText属性详解+++ImageView的属性
Button的使用不要阴影Button ---> TextView (5.0新特性)  <item name="android: ...
详解CSS position属性
原文地址:http://luopq.com/2015/11/15/css-position/ position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父 ...

详解border-radius属性

目录

圆角边框

完整形式8参数

例子

讲解

4参数

3参数

2参数

1参数

配合使用

理解

详解border-radius属性相关推荐

最新文章

热门文章