問(wèn)題：
創(chuàng)新互聯(lián)建站是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站制作、成都做網(wǎng)站，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十余年品質(zhì)，值得信賴(lài)！
實(shí)現(xiàn)以下界面效果，（不要求實(shí)現(xiàn)搜索功能），要求不使用任何框架，純div+css3，同時(shí)必須使用border-radius知識(shí)點(diǎn)
其他說(shuō)明：
1、整個(gè)寬度是800x,要求居中顯示
2、logo圖片按寬300px,居中顯示
3、搜索框width=500px,高度總共是50px
思路分析：
1、該頁(yè)面分成上下2部分，上面是一張Logo,下面是負(fù)責(zé)搜索的功能
2、下面搜索功能的組成部分從左到右依次是，一個(gè)帶圓角的輸入框，一個(gè)照相機(jī)小圖標(biāo)，最右邊是一個(gè)帶圓角的按鈕
具體代碼實(shí)現(xiàn)如下：
1、我們先把素材準(zhǔn)備好，一個(gè)百度Logo圖片，和一個(gè)照相機(jī)小圖標(biāo),然后我們把他們放到images目錄中，方便管理
2、先寫(xiě)好div架構(gòu)
重慶分公司
重慶分公司
模擬百度搜索
3、填充細(xì)節(jié)，先不寫(xiě)樣式，只是填充好元素
代碼如下：
模擬百度搜索
運(yùn)行效果如圖：
接下來(lái)我們做樣式處理
4、寫(xiě)樣式
創(chuàng)建css/index.css,為了方便管理，創(chuàng)建單獨(dú)的文件夾css，然后創(chuàng)建index.css
里面的樣式怎么寫(xiě)呢？我們接下來(lái)分析
1、.container是整體的容器，我們根據(jù)上述要求，得知它的width=800,為了方便看居中效果，所以我們先設(shè)置它的邊框?yàn)?px,然后顏色自定義，我們就寫(xiě)成淺灰色 即border:1px solid lightgray;
，然后里面的內(nèi)容要居中(text-align: center)，為了防止一些元素有默認(rèn)的padding或者margin所以統(tǒng)一設(shè)置成0(padding:0,margin:0),然后我們要求這個(gè)容器也要居中，所以寫(xiě)成margin:0 auto
分析完畢，我們接下來(lái)將.container樣式代碼寫(xiě)入index.css中
.container{
width:800px;
padding:0;
border:1px solid lightgray;
text-align: center;
margin:0 auto;
}2、接下來(lái)分析容器里的上面部分，即圖片Logo的樣式該怎么寫(xiě)
分析如下：
1、根據(jù)要求得知，logo 寬=300即width:300px;也要居中，所以即margin:0 auto，
其實(shí)這里要實(shí)現(xiàn)這種效果有很多種方式，我們就讓圖片的容器logo它的寬度設(shè)置成300，然后讓圖片的寬度100%即可
好，繼續(xù)添加index.css代碼如下
/* 最外層容器 */
.container{
width:800px;
padding:0;
border:1px solid lightgray;
text-align: center;
margin:0 auto;
}
/* LOGO樣式 */
.logo{
width:300px;
margin: 0 auto;
}
.logo img{
width:100%;
}3、接下來(lái)就是設(shè)置搜索部分了
分析如下：
1、根據(jù)要求，整個(gè)搜索的高度是50px 所以我們可以讓搜索容器.search的高度設(shè)置成50px 即height:50px,然后讓按鈕的高度設(shè)置成100%即可，這里要注意的是，按鈕的高度一旦設(shè)置成比如46px，但是如果邊框有4px，那么意味著他里面的高度就只有46-4=42所以按鈕的高度，它是包括了邊框，這點(diǎn)和文本輸入框不同，文本輸入框height=46,那么就不包含邊框
2、文本輸入框的上下邊框總共有4px，所以他的高度就是46px,即height: 46px;這樣整體高度就=50px,即
border:2px solid rgb(70,98,217);
因?yàn)樗膶挾仁?00px所以width:500px,然后它有默認(rèn)的padding,所以設(shè)置它的padding=0,
然后它左上角，左下角都有圓角，大小為10px,即border-radius: 10px 0 0 10px;
好就這樣，先把能想到的比較簡(jiǎn)單的樣式寫(xiě)好，到時(shí)候看具體效果再調(diào)整
接下來(lái)繼續(xù)添加Index.css，代碼如下
/* 最外層容器 */
.container{
width:800px;
padding:0;
border:1px solid lightgray;
text-align: center;
margin:0 auto;
}
/* LOGO樣式 */
.logo{
width:300px;
margin: 0 auto;
}
.logo img{
width:100%;
}
/* 搜索部分樣式 */
.search{
height:50px;
}
.txtInput{
width:500px;
height: 46px;
border:2px solid rgb(70,98,217);
border-radius: 10px 0 0 10px;
padding:0;
}5、照相機(jī)小圖標(biāo)和搜索按鈕樣式代碼分析如下：
1、它的寬度我們就設(shè)置成30px即可，即width:30px
2、搜索按鈕width:100px,高度100%,它也是有圓角，只是是右上和右下，然后他的圓角大小要和文本輸入框的一樣也是10px,背景顏色，也是藍(lán)色rgb(70,98,217),文本顏色是白色，字體大小我們?cè)O(shè)置成15px,padding我們也設(shè)置成0
所以現(xiàn)在的index.css代碼如下：
/* 最外層容器 */
.container{
width:800px;
padding:0;
border:1px solid lightgray;
text-align: center;
margin:0 auto;
}
/* LOGO樣式 */
.logo{
width:300px;
margin: 0 auto;
}
.logo img{
width:100%;
}
/* 搜索部分樣式 */
.search{
height:50px;
}
.txtInput{
width:500px;
height: 46px;
border:2px solid rgb(70,98,217);
border-radius: 10px 0 0 10px;
padding:0;
}
.camIcon{
width:30px;
}
/* 搜索按鈕 */
.btnSearch{
width:100px;
height: 100%;
border:2px solid rgb(70,98,217);
background-color:rgb(70,98,217);
border-radius: 0 10px 10px 0;
color:white;
font-size:15px;
padding:0;
}接下來(lái)為了看到效果，我們把樣式引入index.html
模擬百度搜索
運(yùn)行效果如下：
可以看出，效果基本上差不多了，接下來(lái)，我們要做的修改是
1、我們要讓照相機(jī)按鈕左移，然后高度也要位于文本框中間（這一步，自己去計(jì)算，根據(jù)圖片的寬度，高度，結(jié)合文本框的寬度，高度，可以推算出來(lái)）
2、照相機(jī)左移過(guò)去后，要保證按鈕要和文本框貼合的恰當(dāng)
好繼續(xù)修改index.css 中的照相機(jī)圖標(biāo)樣式，添加margin-left,margin-top
.camIcon{
width:30px;
margin-left:-40px;
margin-top:11px;
}運(yùn)行結(jié)果如下：
我們會(huì)發(fā)現(xiàn)，其實(shí)文本輸入框的高度和按鈕的高度都是50px，但是還是無(wú)法位于同一水平線(xiàn)，怎么做呢？
我們可以通過(guò)float的方式解決這個(gè)問(wèn)題，所以接下來(lái)我們讓文本輸入框，照相機(jī)圖標(biāo)，還有按鈕都float:left
css代碼如下：
/* 最外層容器 */
.container{
width:800px;
padding:0;
border:1px solid lightgray;
text-align: center;
margin:0 auto;
}
/* LOGO樣式 */
.logo{
width:300px;
margin: 0 auto;
}
.logo img{
width:100%;
}
/* 搜索部分樣式 */
.search{
height:50px;
}
.txtInput{
width:500px;
height: 46px;
border:2px solid rgb(70,98,217);
border-radius: 10px 0 0 10px;
padding:0;
/* 解決輸入框和按鈕位于同一水平線(xiàn) */
float: left;
}
.camIcon{
width:30px;
margin-left:-40px;
margin-top:11px;
float: left; /* 解決輸入框和按鈕位于同一水平線(xiàn) */
}
/* 搜索按鈕 */
.btnSearch{
width:100px;
height: 100%;
border:2px solid rgb(70,98,217);
background-color:rgb(70,98,217);
border-radius: 0 10px 10px 0;
color:white;
font-size:15px;
padding:0;
/* 解決輸入框和按鈕位于同一水平線(xiàn) */
float: left;
}運(yùn)行效果如下：
我們發(fā)現(xiàn)現(xiàn)在就符合我們的效果了，位于同一水平線(xiàn)了，但是下面的部分不居中了，那么根據(jù)下面的總共寬度是600（文本輸入框500+按鈕寬度100），那么還剩下800-600=200，所以margin-left:100即可
再次修改index.css中.txtInput
.txtInput{
width:500px;
height: 46px;
border:2px solid rgb(70,98,217);
border-radius: 10px 0 0 10px;
padding:0;
/* 解決輸入框和按鈕位于同一水平線(xiàn) */
float: left;
margin-left: 100px;/*讓文本輸入框居中**/
}好再次運(yùn)行結(jié)果如下：
根據(jù)灰色邊框我們可以看出確實(shí)是居中了，接下來(lái)，去除最外層的邊框即可，去除index.css中的最外層容器的border即可
.container{
width:800px;
padding:0;
/* border:1px solid lightgray; */
text-align: center;
margin:0 auto;
}再來(lái)運(yùn)行效果如下：
好，到此為止，我們就實(shí)現(xiàn)了所有要求的效果?。?！
1、掌握了CSS3中圓角邊框的實(shí)現(xiàn)
2、可以通過(guò)float實(shí)現(xiàn)文本輸入框和按鈕水平平齊
以上就是CSS3圓角邊框?qū)崿F(xiàn)百度首頁(yè)搜索界面效果-案例解析（代碼實(shí)例 ）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！
