html+CSS3实现iOS7扁平化videos图标

新建html文档。

书写hmtl代码。

初始化css代码。

书写css代码。.videos { overflow : hidden; box-shadow : 0 0 0 1px rgba(72, 195, 248, 0.5) inset; background : -webkit-linear-gradient(top, #50ebc2 0%, #50ebc2 33%, #59c7fd 100%); background : -moz-linear-gradient(top, #50ebc2 0%, #50ebc2 33%, #59c7fd 100%); background : -ms-linear-gradient(top, #50ebc2 0%, #50ebc2 33%, #59c7fd 100%); background : -o-linear-gradient(top, #50ebc2 0%, #50ebc2 33%, #59c7fd 100%); background : linear-gradient(top, #50ebc2 0%, #50ebc2 33%, #59c7fd 100%); }.videos:before { position : absolute; content : ''; width : 100%; height : 16px; top : 0; left : 0; z-index : 2; background-color : #fff; background-size : 36px 32px; background-repeat : repeat-x; background-position : -18px -16px; box-shadow : 0 1px 0 1px rgba(0, 0, 0, 0.4); background-image : -webkit-linear-gradient(45deg, transparent 25%, black 26%, black 50%, transparent 51%); background-image : -moz-linear-gradient(45deg, transparent 25%, black 26%, black 50%, transparent 51%); background-image : -ms-linear-gradient(45deg, transparent 25%, black 26%, black 50%, transparent 51%); background-image : -o-linear-gradient(45deg, transparent 25%, black 26%, black 50%, transparent 51%); background-image : linear-gradient(45deg, transparent 25%, black 26%, black 50%, transparent 51%); }.videos:after { position : absolute; content : ''; width : 100%; height : 16px; top : 16px; left : 0; background-color : #fff; background-size : 36px 32px; background-repeat : repeat-x; background-position : -18px -16px; box-shadow : 0 1px 0 0 rgba(0, 0, 0, 0.4); background-image : -webkit-linear-gradient(-45deg, transparent 25%, black 26%, black 50%, transparent 51%); background-image : -moz-linear-gradient(-45deg, transparent 25%, black 26%, black 50%, transparent 51%); background-image : -ms-linear-gradient(-45deg, transparent 25%, black 26%, black 50%, transparent 51%); background-image : -o-linear-gradient(-45deg, transparent 25%, black 26%, black 50%, transparent 51%); background-image : linear-gradient(-45deg, transparent 25%, black 26%, black 50%, transparent 51%); }

代码整体结构

查看效果