css3怎么设置圆角

PHP中文网 JavaScript

本文摘自PHP中文网，作者藏色散人，侵删。

在css3中可以使用“border-radius”属性来给任何元素设置圆角，其设置圆角的完整代码如“border-radius:25px;padding:20px;width:200px;height:150px;”。

本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

CSS3 border-radius 属性

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

以下为三个实例：

1. 指定背景颜色的元素圆角：

5f91472ee870ca25ce0647ef06c9971.png

2. 指定边框的元素圆角:

ed16b39f1103169371a72ad3f6eacdb.png

3. 指定背景图片的元素圆角:

de56bb3c765ecc1e37df9f312d3db22.png

代码如下:

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

#rcorners1 {

    border-radius: 25px;

    background: #8AC007;

    padding: 20px;

    width: 200px;

    height: 150px;

}

#rcorners2 {

    border-radius: 25px;

    border: 2px solid #8AC007;

    padding: 20px;

    width: 200px;

    height: 150px;

}

#rcorners3 {

    border-radius: 25px;

    background: url(paper.gif);

    background-position: left top;

    background-repeat: repeat;

    padding: 20px;

    width: 200px;

    height: 150px;

}

CSS3 border-radius - 指定每个圆角

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

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

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

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

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

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

【推荐学习：《css视频教程》】

以上就是css3怎么设置圆角的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

不支持CSS3的浏览器有哪些

CSS3有哪些新特性？CSS3新特性详解

CSS3如何实现图片木桶布局？（附代码）

CSS3都有哪些新内容

CSS3怎么实现强制不换行

CSS3新增伪类有哪些

html5实践-使用CSS3如何完成google涂鸦动画的详解

CSS3实现条状百分比效果

CSS3是做什么的

border-radius属性如何使用

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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