首页 技术 正文
技术 2022年11月7日
0 收藏 928 点赞 738 浏览 918 个字

border-radius是CSS3设置圆角的一个属性,其属性值得单位可以使用:em、px、百分比等等。但是,border-radius属性值得参数形式有好多种,那么具体都代表什么意思呢?下面以实际例子分析一下:

首先是最常见的一种形式,一个值:border-radius: 值;

border-radius: 10px;

border-radius属性值参数详解

这段代码代表同时将元素的每个圆角的”水平半径”和”垂直半径”都设置为10px。

border-radius属性值参数详解

border-radius可以同时设置1到4个值,(类似于margin与padding的值得设定)。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

代码:

border-radius: 10px 20px 0px 30px;

border-radius属性值参数详解

如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。

代码:

border-radius: 20px 0px;

border-radius属性值参数详解

如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。

代码:

border-radius: 10px 0px 50px;

border-radius属性值参数详解

border-radius还可以用斜杠二组值。这时,第一组值表示水平半径,第二组值表示垂直半径。每组值也可以同时设置1到4个值,应用规则是依次对应左上角、右上角、右下角、左下角(顺时针顺序)。

代码:

border-radius:50px/30px;

border-radius属性值参数详解

代码:

border-radius: 50px 30px 20px 10px / 20px 30px 20px 30px;

border-radius属性值参数详解

    除了可以同时设置四个圆角以外,还可以单独对每个角进行设置。对应四个角,CSS3提供四个单独的属性:   border-top-left-radius   border-top-right-radius   border-bottom-right-radius   border-bottom-left-radius    这四个属性都可以同时设置1到2个值。如果设置1个值,表示水平半径与垂直半径相等。如果设置2个值,第一个值表示水平半径,第二个值表示垂直半径。 代码:

border-top-right-radius: 50px;

border-radius属性值参数详解

border-top-right-radius: 50px 20px;

border-radius属性值参数详解

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,035
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,521
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,369
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,150
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,783
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,865