css3怎么实现圆角

PHP中文网 JavaScript

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

css3实现圆角的方法：首先创建一个HTML示例文件；然后输入HTML结构代码；接着在body中创建一个div；最后通过给该div设置“border:2px solid #a1a1a1;”样式即可实现圆角。

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

css3怎么实现圆角？

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

提示：该属性允许您为元素添加圆角边框！

向 div 元素添加圆角边框：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

<head>

<style>

div

{

text-align:center;

border:2px solid #a1a1a1;

padding:10px 40px;

background:#dddddd;

width:350px;

border-radius:25px;

-moz-border-radius:25px; /* 老的 Firefox */

}

</style>

</head>

<body>

 

<div>border-radius 属性允许您向元素添加圆角。</div>

 

</body>

</html>

效果：

541e471bcdda473e0245cf25c0a0ec2.png

更多详细的HTML/CSS知识，请访问CSS视频教程栏目！

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

相关阅读 >>

wxss和CSS3的区别是什么

利用CSS3进行弹性布局时内容对齐的方法详解

ie8兼容CSS3吗

CSS3中background-orgin实现带相框照片显示效果-案例解析（代码实例 ）

CSS3的default伪类选择器使用详解

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

CSS3有关特性查询功能的讲解介绍

CSS3二级导航菜单制作步骤详解

使用css过渡有哪些触发方式

纯CSS3实现信纸/同学录效果（代码示例）

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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