以后地位:首页 > 建站常识 > 列表

CSS+DIV border-radius 圆角圆边结果

点击: 次时辰:2017/1/7关头词:css圆角 实心圆 空心圆 虚线圆
border-radius:用这个属机能完成圆角边框的结果。此刻只要Mozilla/Firefox 和 Safari 3撑持该属性-webkit-border-radius:苹果;谷歌,等一些阅读器认,由于他们都用的是webkit内核;-moz-border

css圆角

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; }

预定建站
收费供给网站优化
支付关头词