CSS 技巧 —— 搜索框 內陰影

這種類型的搜索框應該較為常見，設計元素有圓角和內陰影，在CSS2時期通常都是用圖片實現的，來看下CSS3的效果，而對於IE6,7這樣的悲劇瀏覽器，也不至於太難看:

畫圓

通過設置一個較大的圓角值就能實現圓形，下面畫了一個直徑為100的圓。

 

.circle {
    width: 100px;
    height: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}

 

內陰影效果

box-shadow的第一個值是陰影類型，默認是外陰影，平常我們使用它都不會設置這個值，所以就是外陰影的效果。如果要實現內陰影效果，需要手動設值：inner 。

 

.inset {
    -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
    -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
    box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}

 

搜索框

回到開始的例子，本例使用了CSS gradient, border-radius, 內陰影效果的box-shadow