這個實例的目的:熟練使用border-radius
涉及的屬性:border-radius 、linear-gradIEnt 、 box-shadow 提示:“:before” “:after”,IE對after、before是不支持的,請在Firefox、Opera、Chrome下試調!要求浏覽器:Firefox、Opera、Chrome 效果圖:
- .docIcon {
- background: #eee;
- background: -webkit-linear-gradIEnt(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
- background: -moz-linear-gradIEnt(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
- background: -o-linear-gradIEnt(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
- background: -ms-linear-gradIEnt(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
- background: linear-gradIEnt(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
- border: 1px solid #ccc;
- display: block;
- width: 40px;
- height: 56px;
- position: relative;
- margin: 42px auto;
- }
- .docIcon
- {
- ...
- -webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
- -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
- box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
- text-indent:-9999em;
- }
- .docIcon
- {
- ...
- -webkit-border-radius:3px 15px 3px 3px;
- -moz-border-radius:3px 15px 3px 3px;
- border-radius:3px 15px 3px 3px;
- }
- .docIcon:before {
- content: "";
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- width: 15px;
- height: 15px;
- background: #ccc;
- background: -webkit-linear-gradIEnt(45deg, #fff 0, #eee 50%, #ccc 100%);
- background: -moz-linear-gradIEnt(45deg, #fff 0, #eee 50%, #ccc 100%);
- background: -o-linear-gradIEnt(45deg, #fff 0, #eee 50%, #ccc 100%);
- background: -ms-linear-gradIEnt(45deg, #fff 0, #eee 50%, #ccc 100%);
- background: linear-gradIEnt(45deg, #fff 0, #eee 50%, #ccc 100%);
- -webkit-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
- -moz-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
- box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
- border-bottom: 1px solid #ccc;
- border-left: 1px solid #ccc;
- }
...
-webkit-border-radius:3px 15px 3px 3px;
-moz-border-radius:3px 15px 3px 3px;
border-radius:3px 15px 3px 3px;
下面是我們目前實現的效果:
第四步:添加條文漸變效果:
下面我們使用“:after”來實現效果,我們出示高度定位0,0。我們應用整體寬度的60%,再加上
- .docIcon:after
- {
- content:"";
- display:block;
- position:absolute;
- left:0;
- top:0;
- width:60%;
- margin:22px 20% 0;
- height:15px;
- }
用CSS3實現多條線漸變:
- .docIcon:after
- {
- ...
- background:#ccc;
- background: -webkit-linear-gradIEnt(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
- background: -moz-linear-gradIEnt(top, #cc 0, #cc 20%, #ff 20%, #ff 40%, #cc 40%, #cc 60%, #ff 60%, #ff 80%, #cc 80%, #cc 100%);
- background: -o-linear-gradIEnt(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
- background: -ms-linear-gradIEnt(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
- background:linear-gradIEnt(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
- }
最後結果: