小米官方网站是如何让所有浏览器支持他的CSS圆角的?

html-css023

小米官方网站是如何让所有浏览器支持他的CSS圆角的?,第1张

你确定他支持了ie内核的圆角?

这是ie8下面的截图

这是chrome下的截图

很明显,根本就没有支持。

他的搜索框、导航条,都是用背景或border实现的。所以你不管怎么调,ie都不会支持。要想所有主流浏览器同时兼容(包括ie6),就只有用图片来做圆角或者引用一个 PIE.htc文件让ie6-8版本都支持css3属性。

1、首先#big左浮动和#right右浮动,right你没有右浮动,right右浮动后设备宽高。

2、#heart不要设上边距,#small 设上填充,并更改相应数值。

3、CSS边框半径,很多浏览器不支持,改后在我电脑上只有360 6.3正常显示。

#big的圆角建议用背景图片做,这并没有改变纯CSS制做的原则。

以下为改动地方:

#heart {

width:33px

height: 77px

margin-left: 28px

margin-right: 28px

background-color:orange

display: block

}

#small {

width:89px

height: 77px

margin-left: 35px

margin-top: 35px

margin-right: 35px

background-color:white

border-radius: 0px 19px 0px 0px

padding-top: 28px

}

增加:

#right {

float: right

height: 140px

width: 33px

background-color: #FFA500

}

代码如下:

<html>

<head>

<style>

body{background-color: #ccc}

#main{background-color: #f57923

width: 415pxheight:300px

margin: 150px auto

border-radius: 25px}

#left,#right{background-color: #fff

margin-top:40px

height:220px}

#left{float:left

width:250px

margin-left:35px

border-top-right-radius: 65px

z-index: -99999}

#inner{background-color: #f57923

width:140px

height: 170px

margin-top:50px

border-top-right-radius: 40px

margin-left: 55px

z-index:10}

#center{background-color:#fff

position: relative

width: 50px

height: 125px

top:45px

left: 45px

z-index:999999}

#right{float: right

width: 50px

margin-right:35px}

</style>

</head>

<body>

<div id=”main”>

<div id=”left”>

<div id=”inner”>

<div id=”center”></div>

</div>

</div>

<div id=”right”></div>

</div>

</body>

</html>

在浏览器打开的效果