html文本框圓角邊框css樣式怎么寫(xiě)

border-radius屬性可以實(shí)現(xiàn)元素的圓角。如下css可以實(shí)現(xiàn)文本框（單行、多行）的圓角：

成都創(chuàng)新互聯(lián)專注于定遠(yuǎn)企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城網(wǎng)站制作。定遠(yuǎn)網(wǎng)站建設(shè)公司,為定遠(yuǎn)等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

input[type=text],textarea{border-radius:3px;border:1px solid #000;}border-radius用法如下：

border-radius

屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置四個(gè)

border-*-radius

屬性。

該屬性允許為元素添加圓角邊框

語(yǔ)法：

border-radius:

1-4

length|%

/

1-4

length|%;

按此順序設(shè)置每個(gè)

radius

的四個(gè)值。

如果省略

bottom-left，則與

top-right

相同。

如果省略

bottom-right，則與

top-left

相同。

如果省略

top-right，則與

top-left

相同。

單位一般用px和百分比較多，其他單位也可

解釋下這個(gè)css樣式

display:inline-block;?//元素以行內(nèi)元素呈現(xiàn)，內(nèi)容以塊元素呈現(xiàn)。

width:100%;?height:44px;?//寬度100%，高度44像素。

border-radius:4px;?//邊框圓角4像素。

border:1px?solid?#e0e0e0;?//1像素實(shí)體邊框，顏色為#e0e0e0；

line-height:44px;?//內(nèi)容行高44像素，以當(dāng)前樣式來(lái)看，就是內(nèi)容垂直居中。

color:#ffffff;?//字體顏色為白色。

background-color:#ff5a84;?//設(shè)置元素背景顏色為#ff5a84。

-webkit-box-sizing:border-box;?box-sizing:border-box;

//設(shè)置盒模型。為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。

text-align:center;?//內(nèi)容水平居中。

white-space:nowrap;?//文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到?br?標(biāo)簽為止。

overflow:hidden;?//超過(guò)設(shè)定的寬高（寬100%，高44像素）的內(nèi)容全部隱藏。

cursor:pointer;?//設(shè)置鼠標(biāo)樣式，當(dāng)鼠標(biāo)停在元素上呈現(xiàn)手的圖標(biāo)。

誰(shuí)能給我寫(xiě)一段將div布局，把矩形框的邊角弄成圓的，不要是尖的角，要圓的，用css樣式寫(xiě)的

在css里加如下的代碼：

border: 5 solid gray;

border-radius:10px;

如過(guò)你不想要邊框，去掉 border: 5 solid gray;就行了。

注意：Firefox 3.5,Firefox 3.0,Safari 3.1,Chrome 2.0.x,Chrome 1.0.x可用

CSS-03-三大特性+盒子模型

CSS 有 非常重要的 三個(gè)特性：層疊性、繼承性、優(yōu)先級(jí)。

相同選擇器 給設(shè)置 相同的樣式，此時(shí)一個(gè)樣式就會(huì) 覆蓋（層疊） 另一個(gè)沖突的樣式。

層疊主要解決樣式?jīng)_突的問(wèn)題 。

層疊性原則：

CSS中的繼承：子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如 文本顏色 和 字號(hào)。

簡(jiǎn)單理解：子承父業(yè)。

當(dāng)同一個(gè)元素指定多個(gè)選擇器，就會(huì)有優(yōu)先級(jí)的產(chǎn)生。

優(yōu)先級(jí)注意點(diǎn)：

權(quán)重疊加 ：如果是復(fù)合選擇器，則會(huì)有權(quán)重疊加，需要計(jì)算權(quán)重。

練習(xí)：

頁(yè)面布局要學(xué)習(xí)三大核心： 盒子模型, 浮動(dòng) 和 定位 .

學(xué)習(xí)好盒子模型能非常好的幫助我們布局頁(yè)面.

網(wǎng)頁(yè)布局過(guò)程：

網(wǎng)頁(yè)布局的核心本質(zhì)： u 就是利用 CSS 擺盒子 /u。

所謂 盒子模型 ：就是把 HTML 頁(yè)面中的布局元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。

CSS 盒子模型本質(zhì)上是一個(gè)盒子，封裝周圍的 HTML 元素，它包括：u邊框/u、u外邊距/u、u內(nèi)邊距/u、和 u實(shí)際內(nèi)容/u

border可以設(shè)置元素的邊框。邊框有三部分組成： 邊框?qū)挾?粗細(xì))、 邊框樣式 、 邊框顏色

語(yǔ)法：

CSS 邊框?qū)傩栽试S你指定一個(gè)元素邊框的 樣式 和 顏色 。

語(yǔ)法

邊框樣式 border-style 可以設(shè)置如下值：

邊框簡(jiǎn)寫(xiě)：

邊框分開(kāi)寫(xiě)法：

課堂要求：請(qǐng)給一個(gè) 200*200 的盒子，設(shè)置上邊框?yàn)榧t色，其余邊框?yàn)樗{(lán)色（提示：一定注意邊框的層疊性）

border-collapse 屬性控制瀏覽器繪制表格邊框的方式。它控制相鄰單元格的邊框。

語(yǔ)法：

邊框會(huì)額外增加盒子的實(shí)際大小。因此我們有兩種方案解決:

padding 屬性用于設(shè)置內(nèi)邊距，即 邊框與內(nèi)容 之間的距離。

padding 屬性（簡(jiǎn)寫(xiě)屬性）可以有一到四個(gè)值。

以上 4 種情況，我們實(shí)際開(kāi)發(fā)都會(huì)遇到。

內(nèi)邊距會(huì)影響盒子實(shí)際大小

當(dāng)我們給盒子指定 padding 值之后，發(fā)生了 2 件事情：

也就是說(shuō)，如果盒子已經(jīng)有了寬度和高度，此時(shí)再指定內(nèi)邊框，會(huì)撐大盒子。

解決方案：

u如果保證盒子跟效果圖大小保持一致/u，則 讓 width/height 減去多出來(lái)的內(nèi)邊距大小 即可。

padding內(nèi)邊距可以撐開(kāi)盒子,我們可以做非常巧妙的運(yùn)用.

因?yàn)槊總€(gè)導(dǎo)航欄里面的字?jǐn)?shù)不一樣多,我們可以不用給每個(gè)盒子寬度了,直接給padding最合適。

相關(guān)取值:

padding內(nèi)邊距可以撐開(kāi)盒子, 有時(shí)候,也會(huì)讓我們?nèi)バ薷膶挾取?/p>

現(xiàn)實(shí)開(kāi)發(fā)時(shí)候，小米側(cè)邊欄，文字距離左側(cè)的距離不能用text-indent調(diào)整，這樣不精確，實(shí)際開(kāi)發(fā)的做法是：給padding值，這樣更加精確

如果盒子本身沒(méi)有指定width/height屬性, 則此時(shí)padding不會(huì)撐開(kāi)盒子大小.

margin 屬性用于設(shè)置外邊距，即控制盒子和盒子之間的距離。

margin 簡(jiǎn)寫(xiě)方式代表的意義跟 padding 完全一致。

外邊距可以讓 塊級(jí) 盒子 水平居中 ，但是必須滿足兩個(gè)條件：

① 盒子必須指定了寬度（width）。

② 盒子 左右的外邊距 都設(shè)置為 auto 。auto----自動(dòng)

常見(jiàn)的寫(xiě)法，以下三種都可以：

注意： 以上方法是讓塊級(jí)元素水平居中， 行內(nèi)元素或者行內(nèi)塊元素水平居中給其父元素添加 text-align:center 即可。

使用 margin 定義塊元素的 垂直外邊距 時(shí)，可能會(huì)出現(xiàn)外邊距的合并。

主要有兩種情況:

1. 相鄰塊元素垂直外邊距的合并

2. 嵌套塊元素垂直外邊距的塌陷

當(dāng)上下相鄰的兩個(gè)塊元素（兄弟關(guān)系）相遇時(shí)，如果上面的元素有下外邊距 margin-bottom，下面的元素有 上外邊距 margin-top ，則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和。取兩個(gè)值中的 較大者這種現(xiàn)象被稱為 相鄰塊元素垂直外邊距的合并 。

解決方案：

對(duì)于兩個(gè)嵌套關(guān)系（父子關(guān)系）的塊元素，父元素有上外邊距同時(shí)子元素也有上外邊距，此時(shí)父元素會(huì)塌陷較大的外邊距值。

解決方案：

① 可以為父元素定義上邊框。

② 可以為父元素定義上內(nèi)邊距。

③ 可以為父元素添加 overflow:hidden。

還有其他方法，比如浮動(dòng)、固定，絕對(duì)定位的盒子不會(huì)有塌陷問(wèn)題，后面再總結(jié)。

網(wǎng)頁(yè)元素很多都帶有默認(rèn)的內(nèi)外邊距，而且不同瀏覽器默認(rèn)的也不一致。因此我們?cè)诓季智埃紫纫宄戮W(wǎng)頁(yè)元素的內(nèi)外邊距。

注意： 行內(nèi)元素為了照顧兼容性，盡量只設(shè)置左右內(nèi)外邊距，不要設(shè)置上下內(nèi)外邊距(因?yàn)樵O(shè)置了也不起作用)。但是轉(zhuǎn)換為塊級(jí)和行內(nèi)塊元素就可以了。

因?yàn)榫W(wǎng)頁(yè)美工大部分效果圖都是利用 PS（Photoshop） 來(lái)做的，所以以后我們大部分切圖工作都是在 PS 里面完成。

因?yàn)榫W(wǎng)頁(yè)美工大部分效果圖都是利用 PS（Photoshop） 來(lái)做的，所以以后我們大部分切圖工作都是在 PS 里面完成。

總結(jié)

標(biāo)簽都是有語(yǔ)義的, 合理的地方用合理的標(biāo)簽。比如產(chǎn)品標(biāo)題 就用 h, 大量文字段落就用p

類名就是給每個(gè)盒子起了一個(gè)名字,可以更好的找到這個(gè)盒子, 選取盒子更容易,后期維護(hù)也方便。

大部分情況兩個(gè)可以混用，兩者各有優(yōu)缺點(diǎn)，但是根據(jù)實(shí)際情況，總是有更簡(jiǎn)單的方法實(shí)現(xiàn)。

布局有很多種實(shí)現(xiàn)方式，同學(xué)們可以開(kāi)始先模仿我的寫(xiě)法，然后再做出自己的風(fēng)格。

最后同學(xué)們一定多運(yùn)用輔助工具,比如屏幕畫(huà)筆,ps等等

去掉 li 前面的 項(xiàng)目符號(hào)（小圓點(diǎn)）

語(yǔ)法：

圓角邊框、盒子陰影、文字陰影

（重點(diǎn)記住前兩個(gè)，文字陰影做了解）

在 CSS3 中，新增了 圓角邊框 樣式，這樣我們的盒子就可以變圓角了。

border-radius 屬性用于設(shè)置元素的外邊框圓角。

語(yǔ)法：

radius 半徑（圓的半徑）原理：（橢）圓與邊框的交集形成圓角效果

CSS3 中新增了盒子陰影，我們可以使用 box-shadow 屬性為盒子添加陰影。

語(yǔ)法：

注意 ：

在 CSS3 中，我們可以使用 text-shadow 屬性將陰影應(yīng)用于文本。

語(yǔ)法：

CSS的三種使用方法。 行內(nèi)樣式： 內(nèi)嵌式： 外部式：

外部式:

（1）用法:當(dāng)要在站點(diǎn)上所有或部分網(wǎng)頁(yè)上一致地應(yīng)用相同樣式時(shí)，可使用外部樣式表。在一個(gè)或多個(gè)外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁(yè)，便能確保所有網(wǎng)頁(yè)外觀的一致性。如果人們決定更改樣式，只需在外部樣式表中修改一次，而該更改會(huì)反映到所有與該樣式表相鏈接的網(wǎng)頁(yè)上。

（2）舉例:通常外部樣式表以 .css 做為文件擴(kuò)展名，例如 Mystyles.css。然后在需要此樣式的頁(yè)面中將其鏈接進(jìn)來(lái)。

2.內(nèi)嵌式:

（1）用法:當(dāng)人們只是要定義當(dāng)前網(wǎng)頁(yè)的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級(jí)聯(lián)樣式表，“嵌”在網(wǎng)頁(yè)的 標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁(yè)上使用。

（2）舉例:在 MicrosoftFrontPage2000中，某些格式設(shè)置特性會(huì)作為內(nèi)嵌樣式自動(dòng)應(yīng)用。例如∶如果使用 “邊框與陰影” 命令（在 “格式” 菜單上）在普通段落周圍應(yīng)用框，F(xiàn)rontPage 會(huì)寫(xiě)下格式設(shè)置信息，作為段落標(biāo)記符的內(nèi)嵌樣式屬性。

3.行內(nèi)樣式:

行內(nèi)樣式就是直接把CSS代碼添加到HTML的標(biāo)記中，即作為HTML標(biāo)記的屬性標(biāo)記存在。通過(guò)這種方法，可以很簡(jiǎn)單地對(duì)某個(gè)元素單獨(dú)定義樣式。

拓展資料:

CSS定義:

它是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。

CSS簡(jiǎn)介:

CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁(yè)面的外觀。通過(guò)使用CSS樣式設(shè)置頁(yè)面格式，可將頁(yè)面的內(nèi)容與表現(xiàn)形式分離。

優(yōu)越性:CSS目前最新版本為CSS3，是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語(yǔ)言。

網(wǎng)站欄目：css行內(nèi)樣式圓角,css輸入框樣式圓角
URL網(wǎng)址：http://chinadenli.net/article43/dsgdehs.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、標(biāo)簽優(yōu)化、全網(wǎng)營(yíng)銷推廣、、網(wǎng)站建設(shè)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)