border-radius:用这个属机能完成圆角边框的结果。此刻只要Mozilla/Firefox 和 Safari 3撑持该属性
-webkit-border-radius:苹果;谷歌,等一些阅读器认,由于他们都用的是webkit内核;
-moz-border-radius:moz这个属性 首要是特地撑持Mozilla Firefox 火狐阅读器的CSS属性。
在这两个属性有值的时辰,去掉哪一个属性,对用他们做内核的阅读器就有影响,若是没值的话,就没影响,这两个属性和,IE,和360没干系。不删除的话影响微不足道
border-radius:上海网站建造的官网 3djiangyin.com便是用这个属机能完成圆角边框的结果。
此刻只要Mozilla/Firefox 和 Safari 3撑持该属性。
.round {-moz-border-radius:5px;-webkit-border-radius:5px; border-radius:5px; border:1px solid #000;}
CSS3中border-radius埋没的能力
这篇文章将简述操纵CSS3的border-radius来画圆、半圆和四分之一圆,并若何操纵它们。
若何操纵border-radius属性
上面是border-radius属性最根基的操纵方式。
.round {border-radius: 5px; /* 一切角都操纵半径为5px的圆角,此属性为CSS3规范属性 */-moz-border-radius: 5px; /* Mozilla阅读器的公有属性 */-webkit-border-radius: 5px; /* Webkit阅读器的公有属性 */border-radius: 5px 4px 3px 2px; /* 四个半径值别离是左上角、右上角、右下角和左下角 */}
实心圆
用border-radius属性画出来的一个完善的实心圆。画实心圆的方式是高度和宽度相称,并且把border的宽度设为高度和宽度的一半。
#circle {width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px; }
空心圆
经由过程border-radius属性画空心圆和画实心圆的方式差未几,只是border的宽度只能小于高度和宽度的一半。代码以下。
#circle {width: 200px; height: 200px; background-color: #efefef; border: 3px #a72525 solid; -webkit-border-radius: 100px; }
虚线圆
#circle { width: 200px; height: 200px; background-color: #efefef; border: 3px #a72525 dashed; -webkit-border-radius: 100px 100px 100px 100px; }