<div class="demo-container demo"><style type="text/css">
.demo{
width: 300px
}
.chrome {
position:relative
width:300px
height:300px
overflow:hidden
border-radius:300px
}
.chrome div {
position:absolute
text-indent:-9999px
}
.chrome_heart_white {
z-index:100
top:95px
left:95px
width:110px
height:110px
background:#fff
border-radius:110px
overflow:hidden
}
.chrome_heart {
top:10px
left:10px
width:90px
height:90px
background:#f00
border-radius:90px
background:-webkit-gradient(linear, left top, left bottom, from(#80B1DA), to(#165E98))
}
.chrome_wrap {
z-index:100
top:-100px
left:-100px
width:300px
height:300px
border-radius:300px
border:100px solid #fff
}
.chrome_part_color {
width:200px
height:210px
opacity:0.94
}
.chrome_part_red {
z-index:3
top:-44px
left:55px
-webkit-transform:rotate(60deg)
border-bottom-right-radius:30px
background:-webkit-gradient(radial, 20% 30%, 20, 40% 30%, 100, from(#ED5F51), to(#DF2228))
}
.chrome_part_red2 {
z-index:9
width:160px
height:80px
top:50px
left:18px
-webkit-transform:rotate(60deg)
background:-webkit-gradient(radial, 30% 0, 30, 40% 30%, 60, from(#E54745), to(#E12F35))
}
.chrome_part_yellow {
z-index:5
top:95px
right:-30px
border-top-left-radius:30px
background:-webkit-gradient(radial, 30% 40%, 130, 40% 20%, 60, from(#DBA328), to(#FDD207))
}
.chrome_part_green {
z-index:7
top:82px
left:-25px
-webkit-transform:rotate(117deg)
border-top-left-radius:30px
background:-webkit-gradient(radial, 30% 40%, 120, 30% 40%, 60, from(#419643), to(#4DB749))
}
.chrome_mask_color {
width:110px
height:110px
background:#fff
}
.chrome_mask_red {
z-index:8
height:40px
top:60px
left:25px
-webkit-transform:rotate(50deg)
background:#E12F35
}
.chrome_mask_yellow {
z-index:4
top:105px
right:-10px
-webkit-transform:rotate(-12deg)
}
.chrome_mask_green {
z-index:6
top:185px
left:38px
-webkit-transform:rotate(15deg)
}
</style>
<div class="chrome">
<div class="chrome_part_color chrome_part_red">红色块</div>
<div class="chrome_part_color chrome_part_yellow">黄色块</div>
<div class="chrome_part_color chrome_part_green">绿色块</div>
<div class="chrome_mask_color chrome_mask_red">红色遮罩</div>
<div class="chrome_mask_color chrome_mask_yellow">黄色遮罩</div>
<div class="chrome_mask_color chrome_mask_green">绿色遮罩</div>
<div class="chrome_part_color chrome_part_red2">红色补丁</div>
<div class="chrome_wrap">外围圆边</div>
<div class="chrome_heart_white">
<div class="chrome_heart">中心</div>
</div>
</div></div>
外部式:
（1）用法:当要在站点上所有或部分网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中修改一次，而该更改会反映到所有与该样式表相链接的网页上。
（2）举例:通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。然后在需要此样式的页面中将其链接进来。
2.内嵌式:
（1）用法:当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 标记符内。嵌入的样式表中的样式只能在同一网页上使用。
（2）举例:在 MicrosoftFrontPage2000中，某些格式设置特性会作为内嵌样式自动应用。例如∶如果使用 “边框与阴影” 命令（在 “格式” 菜单上）在普通段落周围应用框，FrontPage 会写下格式设置信息，作为段落标记符的内嵌样式属性。
3.行内样式:
行内样式就是直接把CSS代码添加到HTML的标记中，即作为HTML标记的属性标记存在。通过这种方法，可以很简单地对某个元素单独定义样式。
拓展资料:
CSS定义:
它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS简介:
CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面格式，可将页面的内容与表现形式分离。
优越性:CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。
您好！很高兴为您答疑。因为不同内核浏览器对同一个css属性及属性值的渲染结果存在较大差异。故您所遇到的问题就是典型的浏览器兼容问题。此类问题都需要通过hack方式实现兼容，建议您重新梳理一下您所有用到的样式，对于存在兼容差异的属性加上hack。
如果对我们的回答存在任何疑问，欢迎继续问询。
