奇酷學(xué)院-CSS中border邊框竟然可以這么用

1、CSS應(yīng)用篇偶買噶！ border邊框竟然可以這么用在我們平時(shí)網(wǎng)頁中，想必大家一定用過 border，可以根據(jù)border給我們提供的各種屬性 實(shí)現(xiàn)盒子的邊框效果，那么今天就給大家分享一下邊框的應(yīng)用。1.常規(guī)姿勢在CSS1中就定義了邊框樣式屬性：border設(shè)置全部或指定具體邊框樣式。具體包括指定樣式：寬度：width、樣式：style (none、solid、dotted、dashed 等)、顏色：color?？梢酝ㄟ^ border統(tǒng)一設(shè)置邊框樣式，也可以通過border-left:width stylecolor獨(dú)立設(shè)置邊框樣式。這部分相對比較簡單，下面我們來使用div示例及樣式展示一下基

2、本設(shè)置方法：douLlfJdashed2.特殊姿勢我們都知道，標(biāo)準(zhǔn)盒子模型的大小會受 content (width,height )、padding > border的影響， 所以，即使一個(gè)盒子未設(shè)置內(nèi)容大小，只要有邊框或內(nèi)邊距，盒子也是會有大小的。我們就從這里出發(fā)，假若盒子未設(shè)置寬度和高度，我們給盒子增加了邊框大小為10px,給每邊邊框設(shè)置不同的顏色來看一下：.boxwidth; O;height: 0; border-style:solid; border-width: 19px; border-top-color border-bottom-color : border-left-

3、color :*F00f; border-right-color :#fQ-Fj假使只有上邊框有顏色，其他邊框的顏色均為透明:.boxwidth: e；height t 3;border;10px solid transparent; border-top - color1frfSS;.bexwidth: 0;height： B;border-topl&px solidborder-right: 10px solid transparent; 此時(shí)我們就會得到一個(gè)三角小圖標(biāo)，是不是感覺很神奇。再比如，我們給盒子設(shè)置width，再來觀察下，你就會發(fā)現(xiàn)你得到了一個(gè)梯形。.boxwidth:

4、 lOpyj;height! e；border:iepx solid transparent; border*toQ*color:#fGG;.boxwidth; 10px;height; e；border-bottom:lSpx solidborder- left: 10px solid tran=p&rervtj border-right: lBpx solid transparent 3.借助其他樣式合并輸出姿勢border邊框還能與 border-radius 一起來做出我們希望效果。例如: boxlfloat: left;width: lpx;height: 10px;marg

5、in-right: 10px; border：© solid transparent; border-top:4px solid #f00; border*radius: 10p冥 000;再做一個(gè)月亮給你呀:）奇酷學(xué)院燈 IK uE DU COM.boxlfloat: left;uidth: 13px*height: 10px;| border:O solid 七廠nsparent； border'top:4px solid #f66; border-radius: 13px 9 9 © t>ox2float: left;width: 10px；height

6、 19px; borders a solid transparent;border-top:4pxsolid #f0Ajbord&r-radius:再送你一朵小花花：* b ox overflow:hidden； margin-bottom:Spx;box div float:leftj margin-right;5px; width;56px; height;5Opx; bolder：ipx solid*leflborder-radius：e 56% e 56%; .Ief2border-radius:59% 0 53% 0;)最后做一個(gè)火熱的愛心送給你呀.boK( posit lo

7、r relatiwkidth 1160|>x; height:).boiM : boi'foi*,Q£posxtiQ n; dbs o 丄 kite;left: MpmsheightIcontent rp ,!j廣61 sol I'd 宅營1*1 旨pw戶電nt) border * r-ad i u-t 11 thS-pY p Q - b«kftrQur»ds*f&0i trflin-sfcrp? rotate(-45dpg); box:afterfpos 直七 ion :abalute"ft '48pxjtop:6px;wiidthLBSgjx;heightcontent s'* 11 j border: 0 solid