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

阅读剩余部分

相关阅读 >>

利用gulp实现压缩的实例

css怎么设置鼠标经过元素显示图片

css自动换行怎么设置

css3 flexbox该怎么使用?

css如何剪切元素??clip属性的使用

如何改变css伪元素的样式

css文字如何隐藏

如何让css样式失效

css sprites如何使用?

css after是什么

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




打赏

取消

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

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

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

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

评论

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