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 clear属性怎么用

css哪些属性可以继承

css如何为div添加阴影效果

css怎么设置图片拉伸不重复

css如何实现虚线边框滚动效果

div css怎么实现隐藏滚动条

css中无继承性的属性有哪些

css怎么设置上边框

css中的内联元素是什么

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




打赏

取消

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

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

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

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

评论

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