1
A
回答
2
这是有可能的。您可以使用background: linear-gradient()
的颜色和多格与border-radius
的形状和不同的高度和宽度,如:
.wrapper {
width: 300px;
}
.layer1 {
height: 10px;
width: 300px;
float: right;
border-bottom-left-radius: 8px;
background: #eeeeee;
/* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #eeeeee 0%, #cccccc 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0);
/* IE6-9 */
}
.layer2 {
height: 30px;
width: 280px;
float: right;
border-bottom-left-radius: 25px;
background: #b5b5b5;
/* Old browsers */
background: -moz-linear-gradient(top, #b5b5b5 0%, #eeeeee 48%, #cccccc 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #b5b5b5 0%, #eeeeee 48%, #cccccc 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b5b5b5 0%, #eeeeee 48%, #cccccc 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#b5b5b5', endColorstr='#cccccc', GradientType=0);
/* IE6-9 */
}
.layer3 {
height: 20px;
width: 230px;
float: right;
border-bottom-left-radius: 15px;
background: #eeeeee;
/* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #eeeeee 0%, #cccccc 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0);
/* IE6-9 */
}
<div class="wrapper">
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
</div>
刚玩的性能一点点,我敢肯定你会得到不错的结果。以上只是一个快速难看的例子...
限制:使用这种方法只能建立凸曲线。
相关问题
- 1. CSS页脚样式
- 2. CSS页脚样式
- 3. Pinterest,引脚CSS样式
- 4. CSS样式表中的跨站脚本
- 5. 页脚不是CSS中的样式
- 6. 页脚的CSS样式出错
- 7. 基于路线的CSS样式 - Angular2
- 8. 使用外部CSS样式表样式SVG线
- 9. jquery脚本似乎停止工作后,css媒体查询踢
- 10. 样式中的CSS样式?
- 11. Css曲线页脚
- 12. 样式和CSS
- 13. CSS样式表
- 14. CSS样式不
- 15. css样式表
- 16. CSS类样式
- 17. CSS样式
- 18. 的CSS样式
- 19. 与CSS样式
- 20. 样式CSS
- 21. CSS样式`tt`
- 22. css样式FIELDSET
- 23. CSS样式表
- 24. MonoTouch css样式
- 25. CSS样式Javascript
- 26. 在CSS样式引用中复制嵌入式CSS样式
- 27. 石英 - 云服务器踢多线程
- 28. CSS样式表不显示样式
- 29. 从HTML样式移动到CSS样式
- 30. 从样式组中选择css样式
它看起来很完美 - 谢谢 – Lola