最近在專案中,有很多地方都用到了線性漸變,例如:表單提交按鈕的背景,資料展示的標題背景等等,按照以前的做法是切 1px 圖片然後 repeat-x。下面我將介紹如何用 css 來完成效果。
css3:linear-gradient
例如:黑色漸層到白色,程式碼如下:
##
.gradient{ background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); }
linear-gradient 具體用法點此進入
。
ie 濾鏡:filter
.gradient{ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); }
:root {filter:none;}
.gradient{ background: #000000; background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); }:root .gradient{filter:none;}
以上是css如何讓背景色漸層相容的寫法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!