css3有一種新功能就是給div或者是圖片等圓角，圓角代碼怎么寫(xiě)你知道嗎，作為一個(gè)經(jīng)常寫(xiě)css的網(wǎng)站制作者，今天跟大家分享一下css圓角邊框代碼，當(dāng)然圖片圓角也是一樣的，我分享的代碼盡量兼容各種瀏覽器，包括ie、360瀏覽器、百度瀏覽器、谷歌瀏覽器等
公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站建設(shè)、做網(wǎng)站、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出宜都免費(fèi)做網(wǎng)站回饋大家。
方法/步驟
1.css代碼：
.yj{
padding:10px; width:300px; height:50px;
border: 2px solid #000000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius:15px; ? ? ? ?
}
-moz-border-radius: 15px; -webkit-border-radius: 15px; ?這兩個(gè)是為了兼容其他一些不常用瀏覽寫(xiě)的css圓角代碼
html代碼：
div class="yj"這個(gè)div四個(gè)角都圓15px;/div
結(jié)果如下：
2 .圖片圓角也是一樣的：
css代碼：
.yj{-moz-border-radius: 15px; ? ? -webkit-border-radius: 15px; border-radius:15px;}
html代碼：
img src="xp.jpg" width="100px" height="100px;" class="yj" /
3.css3圓角代碼也支持上下左右的：
css代碼這么寫(xiě)：
.yj{
padding:10px; width:300px; height:50px;
border: 2px solid #000000;
-moz-border-radius: 0px 0px 20px 25px;; ?
-webkit-border-radius: 0px 0px 20px 25px;;
border-radius:0px 0px 20px 25px;;
}
4.圓角代碼也支持拆分的（四個(gè)邊框都圓角10px的拆分css代碼如下）：
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
border-bottom-left-radius: ?10px;
CSS3圓角只需設(shè)置一個(gè)屬性：border-radius（含義是"邊框半徑"）。你為這個(gè)屬性提供一個(gè)值，就能同時(shí)設(shè)置四個(gè)圓角的半徑。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。
代碼實(shí)例：border-radius: 15px;
1、把下列代碼添加進(jìn)入你的style標(biāo)簽內(nèi)
2、清空緩存，看看效果吧（部分IE版本可能不支持）
預(yù)覽
總結(jié)
這是個(gè)很實(shí)用的方法，可以讓圖片看起來(lái)更「精巧」一些
CSS3 使用border-radius屬性設(shè)置圓角效果
該屬性可以通過(guò)設(shè)置圖片或塊級(jí)元素四個(gè)角的圓角半徑像素?cái)?shù)來(lái)實(shí)現(xiàn)該效果。W3C規(guī)定該屬性的可能取值為：
none，默認(rèn)值，表示元素沒(méi)有圓角效果
length，由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)組成的長(zhǎng)度值
%，由百分比設(shè)置的圓角值
該屬性可以分別設(shè)置元素的四個(gè)圓角效果，采用下列格式來(lái)實(shí)現(xiàn)。
格式：border-radius: 左上角 右上角 右下角 左下角;
通常，四個(gè)方向的角半徑均采用length取值來(lái)實(shí)現(xiàn)，該取值必須為浮點(diǎn)數(shù)字和單位標(biāo)識(shí)共同組成。同時(shí)規(guī)定，該取值不得取負(fù)數(shù)。
例1：利用整數(shù)來(lái)實(shí)現(xiàn)圓角取值。
div{
width: 200px; height: 150px;
border: solid 1px #aaaaaa;
border-radius: 10px 5px 10px 5px;
background-color: #ff5857;
}
上述實(shí)例設(shè)置了一個(gè)div塊級(jí)元素，其寬度為200px，高度為150px。為了能夠看到其圓角效果，增加了顏色為#ff5857的背景顏色，并且添加了1px大小的邊框，其邊框?yàn)閷?shí)線，邊框顏色為#aaaaaa。最后設(shè)置其圓角效果，左上角和右下角均為10px，右上角和左下角均為5px。
例2：查看下列CSS代碼。
（1）border-radius: 10px 5px 15px 20px;
（2）border-radius: 10px 5px 15px;
（3）border-radius: 10px 5px;
（4）border-radius: 10px;
上述四組代碼中，只有組（1）提供了完全符合格式的四個(gè)數(shù)據(jù)，其他三組均只提供了小于四個(gè)的數(shù)據(jù)。這種情況下，數(shù)據(jù)依然按照“左上角 右上角 右下角 左下角”的順序進(jìn)行排列，沒(méi)有涉及到的角方向按照其對(duì)角的圓角數(shù)據(jù)進(jìn)行設(shè)置。
因此，組（2）的數(shù)據(jù)表示：左上角為10px，右上角為5px，右下角為15像素，左下角為右上角的像素設(shè)置，即5px。請(qǐng)同學(xué)們根據(jù)這樣的方法，理解一下組（3）的圓角含義。
組（4）就設(shè)置了一個(gè)數(shù)據(jù)，這表示四個(gè)方向的角半徑均為10px。
二、獨(dú)立設(shè)置元素的四個(gè)圓角效果：
若只想設(shè)置一個(gè)塊級(jí)元素右上角的圓角效果，該如何實(shí)現(xiàn)呢？這里W3C為border-radius屬性派生出了表示四個(gè)方向的獨(dú)立圓角效果的子屬性。
border-top-left-radius, 定義左上角的圓角效果
border-top-right-radius, 定義右上角的圓角效果
border-bottom-right-radius, 定義右下角的圓角效果
border-bottom-left-radius, 定義左下角的圓角效果
上述四個(gè)子屬性的取值規(guī)則和border-radius屬性的取值規(guī)則是完全相同的。
例3：設(shè)置p標(biāo)記的圓角效果，其中左下角沒(méi)有圓角效果，其他三個(gè)方向角的圓角效果均為25px。
方法1：利用border-radius屬性統(tǒng)一設(shè)置。
p{border-radius: 25px 25px 25px 0;}
方法2：利用border-radius屬性的派生子屬性設(shè)置。
p{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
方法3：利用border-radius屬性設(shè)置所有角方向均為25px，再利用border-radius屬性的派生子屬性設(shè)置左下角沒(méi)有圓角效果。
p{
border-radius: 25px;
border-bottom-left-radius: none;
}
盒子模型是CSS中一個(gè)很重要的概念，頁(yè)面中的所有元素都可以看成一個(gè)盒子，并占據(jù)一定的頁(yè)面空間，一個(gè)頁(yè)面由很多盒子組成，盒子之間會(huì)互相影響。只有掌握盒模型以及其中每個(gè)屬性的用法，才能真正控制好頁(yè)面元素。
盒子模型主要定義四個(gè)區(qū)域： 內(nèi)容(content)、內(nèi)邊距/填充(padding)、邊框(border)和外邊距(margin) 。
盒子的內(nèi)容區(qū)域存放文本和圖片等頁(yè)面元素，擁有如下屬性：
邊框基本屬性：
通過(guò)一個(gè)屬性設(shè)置四個(gè)方向邊框的寬度、樣式、顏色
屬性：border
取值：width style color;
只設(shè)置某一條邊框的寬度、樣式、顏色
語(yǔ)法：border-方向（top/right/bottom/left）：width style color;
只設(shè)置邊框的寬度、樣式、顏色中的一種
語(yǔ)法：border-屬性（width/style/color）：取值;
只設(shè)置某一條邊框的寬度、樣式、顏色中的一種
語(yǔ)法：border-方向（top/right/bottom/left）-屬性（width/style/color）：取值;
屬性：border-radius
作用：設(shè)置倒角位置處圓的半徑，半徑越大，弧度越大。
取值：
屬性：border-image
語(yǔ)法：
border-image-source ：引入背景圖片
取值：
默認(rèn)值：無(wú)圖片
url(圖片URL地址)
border-image-slice ：切割引入背景圖片，把邊框背景切成9份
取值：
number：默認(rèn)單位px
百分比：
fill：保留邊框圖像的中間部分
border-image-width ：指定邊框圖片的寬度
border-image-repeat ：指定邊框背景圖片的排列方式，可定義2個(gè)參數(shù)，即水平和垂直方向
取值：
Stretch：默認(rèn)值，拉伸
Repeat：平鋪
Round：取整平鋪
內(nèi)容區(qū)域和邊框（邊緣）之間的距離
語(yǔ)法：padding: 值；
單邊設(shè)置：padding-方向（top/right/bottom/left）:值；
取值：
數(shù)值px
百分比
內(nèi)邊距的簡(jiǎn)寫(xiě)方式：
padding:value;
四個(gè)方向內(nèi)邊距的值均為value
padding:value1 value2;
Value1為上下內(nèi)邊距的值，value2為左右內(nèi)邊距的值
padding:value1 value2 value3;
Value1為上內(nèi)邊距的值，value2為左右內(nèi)邊距的值，value3為下內(nèi)邊距的值
padding:value1 value2 value3 value4;
上右下左內(nèi)邊距的值分別為value1， value2， value3， value4
外邊距指元素與元素之間的距離，即圍繞在元素邊框之外的空白區(qū)域，通過(guò)外邊距可以為元素創(chuàng)建額外的“空間”。默認(rèn)不能被其他元素所占據(jù)，用于拉伸兩個(gè)元素間的距離。
語(yǔ)法：margin: 值；
單邊設(shè)置：margin-方向（top/right/bottom/left）:值；
取值：
重新制定元素尺寸計(jì)算模式
屬性：box-sizing
取值：
屬性：resize
取值：
位于元素邊框之外的一條線
屬性：
outline：width style color;
屬性：box-shadow
語(yǔ)法：
box-shadow: h-shadow v-shadow blur spread color inset;
取值：由一組值構(gòu)成的值列表
屬性：background-color
取值：顏色值或transparent
注意：背景顏色是從邊框位置處開(kāi)始繪制
屬性：background-image
取值：url(背景圖像URL)
屬性：background-repeat
取值：
屬性：background-attchment
取值：
scroll：默認(rèn)值，滾動(dòng)
fixed：固定
屬性：background-position
取值：
屬性：background-size
取值：
屬性：background-origin
取值：
屬性：background-clip
取值：
CSS3多背景通過(guò)為每個(gè)背景屬性提供多個(gè)屬性值實(shí)現(xiàn)。
font 簡(jiǎn)寫(xiě)屬性語(yǔ)法：
將所有字體屬性合寫(xiě)為一行，其中font-family是復(fù)合屬性中必不可少的屬性。
可以不設(shè)置其中的某個(gè)值，如果省略值地話，就使用屬性的默認(rèn)值。
②文本屬性：
（2）CSS3文本陰影屬性：
屬性：text-shadow
作用：產(chǎn)生陰影和模糊主體
語(yǔ)法：
作用：定義列表的編號(hào)樣式
屬性：list-style-type
作用：用于設(shè)置列表項(xiàng)的圖像屬性
語(yǔ)法：
圖像URL地址：圖像的相對(duì)路徑或絕對(duì)路徑
none：默認(rèn)值，不指定圖像
注意：圖片圖標(biāo)與文字之間的距離在不同瀏覽器中是不一樣的，因此，一般情況下不采用這種方式來(lái)設(shè)置列表的圖片樣式。
通過(guò)設(shè)置li的背景圖片的方式來(lái)設(shè)置列表圖片基本步驟：
設(shè)置list-style-type屬性值為none
設(shè)置li標(biāo)記的背景屬性backgruond
作用：用于聲明列表標(biāo)志相對(duì)于列表項(xiàng)內(nèi)容的位置
語(yǔ)法：
作用：可以同時(shí)設(shè)定列表樣式類型、列表樣式位置、列表樣式圖片等屬性的值。
語(yǔ)法：
注意：
可以不設(shè)置其中的某個(gè)值，未設(shè)置的屬性采用默認(rèn)值
同時(shí)指定list-style-image和list-style-type時(shí)，list-style-image優(yōu)先顯示，除非list-style-image設(shè)置為none，或圖片路徑錯(cuò)誤無(wú)法顯示
當(dāng)列表與列表項(xiàng)目同時(shí)使用樣式時(shí)，列表項(xiàng)目的樣式優(yōu)先顯示
特點(diǎn)：
可以設(shè)置寬度和高度
默認(rèn)情況下每個(gè)塊級(jí)元素獨(dú)占一行
作用：
塊級(jí)元素主要用于頁(yè)面布局
常用塊級(jí)元素：
div、p、h1~h6、ol、ul等
特點(diǎn)：
不可以設(shè)置寬度和高度，其寬度就是自身文字或圖片的寬度
默認(rèn)情況下多個(gè)行內(nèi)元素會(huì)在一行內(nèi)顯示，遇父元素邊界時(shí)會(huì)自動(dòng)換行
作用：
行內(nèi)元素主要用于設(shè)置文樣式
常用行內(nèi)元素：
a、span、em、b、i、strong、img、input等
作用：控制頁(yè)面元素脫離原有文檔流，實(shí)現(xiàn)向左或向右移動(dòng)，直到該元素外邊緣碰到其包含框或另一個(gè)浮動(dòng)框的邊緣停止，標(biāo)準(zhǔn)流中的其他盒子將頂?shù)礁?dòng)盒子的位置。浮動(dòng)的元素不占據(jù)實(shí)際空間。
屬性： float
取值：
浮動(dòng)元素不會(huì)相互重疊；
浮動(dòng)元素不會(huì)上下浮動(dòng)，如果一個(gè)浮動(dòng)元素在另一個(gè)浮動(dòng)元素之后顯示，而且會(huì)超出容納塊，則它下降到低于先前任何浮動(dòng)元素的位置。
作用：規(guī)定元素的哪一側(cè)不允許出現(xiàn)其他浮動(dòng)元素。
取值：
作用：控制頁(yè)面元素在頁(yè)面中的位置。
屬性：position
取值：static/relative/absolute/fiexed
默認(rèn)屬性值，元素按照標(biāo)準(zhǔn)文檔流進(jìn)行排列，塊級(jí)元素獨(dú)占一行， 行內(nèi)元素位于一行內(nèi)顯示，一行顯示不下，自動(dòng)換行。
特點(diǎn)：
相對(duì)于自身原有位置進(jìn)行偏移
仍處于標(biāo)準(zhǔn)文檔流中
隨即擁有偏移屬性和z-idex屬性
偏移屬性:
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
當(dāng)元素相對(duì)定位后會(huì)產(chǎn)生Z軸上的堆疊，不設(shè)置z-index屬性時(shí)，默認(rèn)該元素出現(xiàn)在X軸和Y軸構(gòu)成的平面上。
特點(diǎn)：
建立了以包含塊為基準(zhǔn)的定位
絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素（設(shè)定了絕對(duì)定位、相對(duì)定位或固定定位中的任何一種），如果元素沒(méi)有已定位的祖先元素，則該元素的位置相對(duì)于瀏覽器窗口。
完全脫離了標(biāo)準(zhǔn)文檔流
隨即擁有偏移屬性和z-idex屬性
偏移屬性：
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
絕對(duì)定位未設(shè)置偏移量的特點(diǎn)：
無(wú)論是否存在已經(jīng)定位的祖先元素，都保持在元素的初始位置
脫離了標(biāo)準(zhǔn)文檔流
設(shè)定固定定位的元素框的表現(xiàn)類似于將position設(shè)置為absolute，不過(guò)其包含塊是瀏覽器窗口本身。
在計(jì)算機(jī)顯示中把垂直于屏幕平面的方向稱為Z方向，CSS絕對(duì)定位容器的z-index屬性即對(duì)應(yīng)該方向。
作用：用于控制元素的層疊次序，使得某個(gè)元素浮于其他元素之上。
語(yǔ)法：
auto：遵循其父元素的定位
number：整數(shù)，可負(fù)，值大者疊加在上層
注意：使用z-index屬性時(shí)，要求該元素的position屬性值為absolute、relative或fixed。
作用：用于定義建立布局時(shí)元素生成的顯示框類型
語(yǔ)法：dispaly:值;
作用：用于定義建立布局時(shí)元素生成的顯示框類型
語(yǔ)法：visibility:值;
用CSS代碼設(shè)定按鈕的圓角樣式，這個(gè)在css3中才能實(shí)現(xiàn)，通過(guò)使用border-radius來(lái)實(shí)現(xiàn)這個(gè)效果，不過(guò)有瀏覽器的兼容性問(wèn)題，-moz(例如 -moz-border-radius)用于Firefox；-webkit(例如：-webkit-border-radius)用于Safari和Chrome；border-radius:5px 15px 20px 25px;它的意思就是上的圓角5px，右的圓角15px，下的圓角20px，左的圓角25px，通過(guò)例子來(lái)實(shí)際看下：
div id="round"/div
#round {
padding:10px; width:300px; height:50px;
border: 5px solid #dedede;
-moz-border-radius: 15px; ? ? ?/* Gecko browsers */
-webkit-border-radius: 15px; ? /* Webkit browsers */
border-radius:15px; ? ? ? ? ? ?/* W3C syntax */
}
效果如圖：
重慶分公司
重慶分公司
