本文目標：
1、掌握CSS3中border-radius的用法
#問題：
實現以下介面效果，（不要求實現搜尋功能），要求不使用任何框架，純div css3，同時必須使用border-radius知識點
#其他說明：
1、整個寬度是800x,要求居中顯示
2、logo圖片以寬300px,居中顯示
3、搜尋框width=500px,高度總共是50px
#想法分析：
1、該頁面分成上下2部分，上面是一張Logo,下面是負責搜尋的功能
2、下面搜尋功能的組成部分從左到右依序是，一個帶圓角的輸入框，一個照相機小圖標，最右邊是一個帶圓角的按鈕
具體程式碼實現如下：
1、我們先把素材準備好，一個百度Logo圖片，和一個相機小圖示,然後我們把他們放到images目錄中，方便管理
nbsp;html> <meta> <meta> <title>模拟百度搜索</title> <div> <!-- 上面部分:logo图片 --> <div> </div> <!-- 下面部分：搜索功能 --> <div> </div> </div>3、填滿細節，先不寫樣式，只是填入好元素程式碼如下：
nbsp;html> <meta> <meta> <title>模拟百度搜索</title> <div> <!-- 上面部分:logo图片 --> <div> <img class="camIcon lazy" src="/static/imghwm/default1.png" data-src="images/cam.png" alt="CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）" > </div> <!-- 下面部分：搜索功能 --> <div> <input> <img class="camIcon lazy" src="/static/imghwm/default1.png" data-src="images/cam.png" alt="CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）" > <input> </div> </div>運行效果如圖：
，然後裡面的內容要居中(text-align: center)，為了防止一些元素有預設的padding或margin所以統一設定成0(padding :0,margin:0),然後我們要求這個容器也要居中，所以寫成margin:0 auto
.container{
width:800px;
padding:0;
border:1px solid lightgray;
text-align: center;
margin:0 auto;
} 2、接下來分析容器裡的上面部分，也就是圖片Logo的樣式該怎麼寫分析如下：1、根據要求得知，logo 寬=300即width :300px;也要居中，所以即margin:0 auto，其實這裡要實現這種效果有很多種方式，我們就讓圖片的容器logo它的寬度設定成300，然後讓圖片的寬度100%即可好，繼續加入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、接下來就是設定搜尋部分了分析如下：1、根據要求，整個搜尋的高度是50px 所以我們可以讓搜尋容器.search的高度設定成50px 即height:50px,然後讓按鈕的高度設定成100%即可，這裡要注意的是，按鈕的高度一旦設定成例如46px，但是如果邊框有4px，那麼意味著他裡面的高度就只有46-4=42所以按鈕的高度，它是包括了邊框，這點和文字輸入框不同，文字輸入框height =46,那麼就不包含邊框2、文字輸入框的上下邊框總共有4px，所以他的高度就是46px,即height: 46px;這樣整體高度就=50px,即#border:2px solid rgb(70,98,217);因為它的寬度是500px所以width:500px,然後它有預設的padding,所以設定它的padding=0,然後它左上角，左下角都有圓角，大小為10px,即border-radius: 10px 0 0 10px;好就這樣，先把能想到的比較簡單的樣式寫好，到時候看具體效果再調整接下來繼續加入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、照相機小圖示和搜尋按鈕樣式程式碼分析如下：##1、它的寬度我們就設定成30px即可，即width:30px
2、搜尋按鈕width:100px,高度100%,它也是有圓角，只是右上和右下，然後他的圓角大小要和文字輸入框的一樣也是10px,背景顏色，也是藍色rgb(70,98,217),文字顏色是白色，字體大小我們設定成15px,padding我們也設定成0
所以現在的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;
}接下來為了看到效果，我們把樣式引入index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模拟百度搜索</title>
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<!-- 上面部分:logo图片 -->
<div class="logo">
<img class="camIcon lazy" src="/static/imghwm/default1.png" data-src="images/cam.png" / alt="CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）" >
</div>
<!-- 下面部分：搜索功能 -->
<div >
<input type="text" />
<img class="camIcon lazy" src="/static/imghwm/default1.png" data-src="images/cam.png" / alt="CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）" >
<input type="button" class="btnSearch" value="百度一下"/>
</div>
</div>
</body>
</html>運行效果如下：
可以看出，效果基本上差不多了，接下來，我們要做的修改是
1、我們要讓照相機按鈕左移，然後高度也要位於文字方塊中間（這一步，自己去計算，根據圖片的寬度，高度，結合文字框的寬度，高度，可以推算出來）
2、照相机左移过去后，要保证按钮要和文本框贴合的恰当
好继续修改index.css 中的照相机图标样式，添加margin-left,margin-top
.camIcon{
width:30px;
margin-left:-40px;
margin-top:11px;
}运行结果如下：
我们会发现，其实文本输入框的高度和按钮的高度都是50px，但是还是无法位于同一水平线，怎么做呢？
我们可以通过float的方式解决这个问题，所以接下来我们让文本输入框，照相机图标，还有按钮都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;
/* 解决输入框和按钮位于同一水平线 */
float: left;
}
.camIcon{
width:30px;
margin-left:-40px;
margin-top:11px;
float: left; /* 解决输入框和按钮位于同一水平线 */
}
/* 搜索按钮 */
.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;
/* 解决输入框和按钮位于同一水平线 */
float: left;
}运行效果如下：
我们发现现在就符合我们的效果了，位于同一水平线了，但是下面的部分不居中了，那么根据下面的总共宽度是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;
/* 解决输入框和按钮位于同一水平线 */
float: left;
margin-left: 100px;/*让文本输入框居中**/
}好再次运行结果如下：
根据灰色边框我们可以看出确实是居中了，接下来，去除最外层的边框即可，去除index.css中的最外层容器的border即可
.container{
width:800px;
padding:0;
/* border:1px solid lightgray; */
text-align: center;
margin:0 auto;
}再来运行效果如下：
好，到此为止，我们就实现了所有要求的效果！！！
总结：
1、掌握了CSS3中圆角边框的实现
2、可以通过float实现文本输入框和按钮水平平齐
希望本文能给大家带来一定的帮助，谢谢！！！
以上是CSS3圓角邊框實作百度首頁搜尋介面效果-案例解析（程式碼實例 ）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
光標的下一個CSS樣式Apr 23, 2025 am 11:04 AM具有CSS的自定義光標很棒，但是我們可以將JavaScript提升到一個新的水平。使用JavaScript，我們可以在光標狀態之間過渡，將動態文本放置在光標中，應用複雜的動畫並應用過濾器。
世界碰撞：使用樣式查詢的鑰匙幀碰撞檢測Apr 23, 2025 am 10:42 AM互動CSS動畫和元素相互啟動的元素在2025年似乎更合理。雖然不需要在CSS中實施乒乓球，但CSS的靈活性和力量的增加，可以懷疑Lee＆Aver Lee有一天會成為一種
使用CSS背景過濾器進行UI效果Apr 23, 2025 am 10:20 AM有關利用CSS背景濾波器屬性來樣式用戶界面的提示和技巧。您將學習如何在多個元素之間進行背景過濾器，並將它們與其他CSS圖形效果集成在一起以創建精心設計的設計。
微笑嗎？Apr 23, 2025 am 09:57 AM好吧，事實證明，SVG的內置動畫功能從未按計劃進行棄用。當然，CSS和JavaScript具有承載負載的能力，但是很高興知道Smil並沒有像以前那樣死在水中
'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM是的，讓＃039;跳上文字包裝：Safari Technology Preview In Pretty Landing！但是請注意，它與在鉻瀏覽器中的工作方式不同。
CSS-tricks編年史XLIIIApr 23, 2025 am 09:35 AM此CSS-tricks更新了，重點介紹了年鑑，最近的播客出現，新的CSS計數器指南以及增加了幾位新作者，這些新作者貢獻了有價值的內容。
tailwind的@Apply功能比聽起來更好Apr 23, 2025 am 09:23 AM在大多數情況下，人們展示了@Apply的@Apply功能，其中包括Tailwind的單個property實用程序之一（會改變單個CSS聲明）。當以這種方式展示時，@Apply聽起來似乎很有希望。如此明顯
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
