css圆角属性是什么


本文摘自PHP中文网,作者V,侵删。

css圆角属性是border-radius,通过该属性我们可以给任何元素制作圆角,例如【border-radius: 15px 50px 30px 5px】。如果我们在border-redius属性中只指定一个值,那么将生成四个圆角。

圆角属性即 border-radius 属性,通过该属性我们可以给任何元素制作 "圆角"。

(学习视频分享:java视频教程)

1

2

3

4

5

border-radius    所有四个边角 border-*-*-radius 属性的缩写   

border-top-left-radius    定义了左上角的弧度   

border-top-right-radius    定义了右上角的弧度   

border-bottom-right-radius    定义了右下角的弧度   

border-bottom-left-radius    定义了左下角的弧度

如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。

但是,如果你要在四个角上一一指定,可以使用以下规则:

四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角

两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角

一个值: 四个圆角值相同

以下为三个实例:

1、四个值 - border-radius: 15px 50px 30px 5px:

b709f2bd9647f12b23c02fc242eecdf.png

2、三个值 - border-radius: 15px 50px 30px:

69a198a96a8f961023bf73ed8050f15.png

3、 两个值 - border-radius: 15px 50px:

c647ab56edb7fa32ec687f8f8dc9b4b.png

代码示例:

阅读剩余部分

相关阅读 >>

css为什么压缩

css animation-play-state属性怎么用

html5 css 需不需要js

一招搞定css元素五彩斑斓的背景

css中grid布局和表格有什么区别

浅谈css实现毛玻璃效果的方法

css align-content属性怎么用

css中绝对定位什么意思

css如何使用伪元素

css是c语言吗

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...