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怎么实现圆角的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

text-outline属性怎么用

overflow-x属性怎么用

CSS3是做什么的

CSS3怎么实现圆角

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

CSS3实现条状百分比效果

CSS3中box-sizing属性的解析（附代码）

CSS3实现文字折纸效果的方法（代码示例）

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

text-emphasis属性有什么用

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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