CSS圆角实际效果

日期:2021-03-12 类型:科技新闻 

关键词:h5小游戏,h5如何制作,免费h5在线制作,h5页面在线制作,测一测h5

-webkit-border-radius:iPhone;谷歌,等1些访问器认,由于她们都用的是webkit核心;
-moz-border-radius:moz这个特性 关键是专业适用Mozilla Firefox 火狐访问器的CSS特性。
在这两个特性有值的情况下,去掉哪一个特性,对用她们做核心的访问器就有危害,假如没值的话,就没危害,这两个特性和,IE,和360没事儿。不删掉的话危害寥寥无几.

border-radius:用这个特性能完成圆角边框的实际效果。
如今仅有Mozilla/Firefox 和 Safari 3适用该特性。请看下面的示例编码:

拷贝编码
编码以下:

<div style="background-color:#ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px solid #000;
padding:10px;"
>

Mozilla/Firefox 和 Safari 3客户将在这里看到圆角边框
另外,设计方案者还能够随便特定圆角的部位,左上、左下、右上、右下4个方位。在mozilla/firefox和safari中的实际撰写文件格式以下:

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius


Mozilla/Firefox 和Safari 3 中看到的左上圆角
Mozilla/Firefox 和Safari 3 中看到的右上圆角
Mozilla/Firefox 和Safari 3 中看到的左下圆角
Mozilla/Firefox 和Safari 3 中看到的右下圆角

CSS3中border-radius掩藏的威力

这篇文章内容将简述应用CSS3的border-radius来画圆、半圆和4分之1圆,并怎样运用它们。
怎样应用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; /* 4个半径值各自是左上角、右上角、右下角和左下角 */
}

有关在IE里如何完成圆角,能够看《Excellent Article Which Included Ways to Achieve Rounded Corners in IE》这篇文章内容。

1.用border-radius画圆
实心圆

如图,是用border-radius特性画出来的1个完善的实心圆。画实心圆的方式是高宽比和宽度相同,而且把border的宽度设为高宽比和宽度的1半。编码以下。

拷贝编码
编码以下:

#circle {
width: 200px;
height: 200px;
background-color: #a72525;
-webkit-border-radius: 100px;
}

空心圆

根据border-radius特性画空心圆和画实心圆的方式类似,只是border的宽度只能小于高宽比和宽度的1半。编码以下。

拷贝编码
编码以下:

#circle {
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 solid;
-webkit-border-radius: 100px;
}

虚线圆


拷贝编码
编码以下:

#circle {
width: 200px;
height: 200px;
background-color: #efefef; /* Can be set to transparent */
border: 3px #a72525 dashed;
-webkit-border-radius: 100px 100px 100px 100px;
}

上一篇:中小型公司必须什么网站运营服务 返回下一篇:没有了