css中如何实现圆角效果


本文摘自PHP中文网,作者青灯夜游,侵删。

在css中,可以使用border-radius属性来实现圆角效果。border-radius属性用于设置元素的外边框圆角,只需要给指定元素添加“border-radius: 圆角值;”代码样式即可实现圆角效果。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css中,可以使用border-radius属性来实现圆角效果。

CSS3 border-radius 属性

使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。

语法:

1

border-radius: 1-4 length|% / 1-4 length|%;

注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。

1.png

【推荐教程:CSS视频教程】

border-radius属性值的指定规则:

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

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

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

  • 一个值: 四个圆角值相同

以下为四个实例:

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

3.png

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

4.png

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

5.png

4、一个值 - border-radius: 25px;

2.png

阅读剩余部分

相关阅读 >>

css如何设置斜体

css如何写二级下拉菜单

html怎么加载css

css样式表常驻留在文档的什么区域中

jsp css图片不显示怎么办

css 如何显示部分图片

css元素垂直居中

css中什么是行高

css怎么设置字体颜色

一分钟了解css的主要功能

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




打赏

取消

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

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

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

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

评论

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