CSS3中border-radius潜匿的威力
发布时间：2018-09-05 06:56:24 所属栏目：创业 来源：站长网
导读：这篇文章将简述行使CSS3的border-radius来画圆、半圆和四分之一圆，并怎样操作它们。 怎样行使border-radius属性 下面是border-radius属性最根基的行使要领。 Copy to Clipboard 引用的内容：[www.veryhuo.com].round { border-radius: 5px; /* 全部角都使
这篇文章将简述行使CSS3的border-radius来画圆、半圆和四分之一圆，并怎样操作它们。
怎样行使border-radius属性下面是border-radius属性最根基的行使要领。 Copy to Clipboard 引用的内容：[www.veryhuo.com]
.round { border-radius: 5px; /* 全部角都行使半径为5px的圆角，此属性为CSS3尺度属性 */ -moz-border-radius: 5px; /* Mozilla赏识器的私有属性 */ -webkit-border-radius: 5px; /* Webkit赏识器的私有属性 */ border-radius: 5px 4px 3px 2px; /* 四个半径值别离是左上角、右上角、右下角和左下角 */ } 关于在IE里怎么实现圆角，可以看《Excellent Article Which Included Ways to Achieve Rounded Corners in IE》这篇文章。 1.用border-radius画圆实心圆
如图，是用border-radius属性画出来的一个美满的实心圆。画实心圆的要领是高度和宽度相称，而且把border的宽度设为高度和宽度的一半。代码如下。 Copy to Clipboard引用的内容：[www.veryhuo.com]
#circle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px; } 空心圆
通过border-radius属性画空心圆和画实心圆的要领差不多，只是border的宽度只能小于高度和宽度的一半。代码如下。 Copy to Clipboard引用的内容：[www.veryhuo.com]
#circle { width: 200px; height: 200px; background-color: #efefef; /* Can be set to transparent */ border: 3px #a72525 solid; -webkit-border-radius: 100px; } 虚线圆
Copy to Clipboard 引用的内容：[www.veryhuo.com]
#circle { width: 200px; height: 200px; background-color: #efefef; /* Can be set to transparent */ border: 3px #a72525 dashed; -webkit-border-radius: 100px 100px 100px 100px; } （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
