国产激情久久久久影院小草_国产91高跟丝袜_99精品视频99_三级真人片在线观看

CSS border虛線邊框?qū)傩越坛?/h1>
時(shí)間:2024-06-08 13:14:53 CSS 我要投稿
  • 相關(guān)推薦

關(guān)于CSS border虛線邊框?qū)傩越坛?/p>

  上下左右邊框交界處呈現(xiàn)平滑的斜線。利用這個(gè)特點(diǎn),通過設(shè)置不同的上下左右邊框?qū)挾然蝾伾梢缘玫叫∪、梯形等?/p>

  調(diào)整寬度大小可以調(diào)節(jié)三角形形狀。

  實(shí)現(xiàn)三角形

  示例1:

  CSS Code復(fù)制內(nèi)容到剪貼板 #test1{ height:20px; width:20px; border-color:#FF9600#3366ff#12ad2a#f0ed7a; border-style:solid; border-width:20px; }

  示例2:

  在上面的基礎(chǔ)上,把高度寬度都設(shè)為0時(shí),會呈現(xiàn)邊界斜線。

  CSS Code復(fù)制內(nèi)容到剪貼板 #test2{ height:0; width:0; overflow:hidden;/*這里設(shè)置overflow,font-size,line-height*/ font-size:0;/*是因?yàn)?雖然寬高度為0,但在IE6下會具有默認(rèn)的*/ line-height:0;/*字體大小和行高,導(dǎo)致盒子呈現(xiàn)被撐開的長矩形*/ border-color:#FF9600#3366ff#12ad2a#f0eb7a; border-style:solid; border-width:20px; }

  示例3:

  示例2中可以看到有4個(gè)三角形了,如果把4種顏色,只保留一種顏色,余下3種顏色設(shè)置為透明或者與背景色相同,那就形成一個(gè)三角形。 CSS Code復(fù)制內(nèi)容到剪貼板 #test3{ height:0; width:0; overflow:hidden; font-size:0; line-height:0; border-color:#FF9600transparenttransparenttransparent; border-style:solid; border-width:20px; }

  示例4:

  示例3中,在IE6下,需要設(shè)置余下三邊的border-style為dashed,即可達(dá)到透明的效果。

  CSS Code復(fù)制內(nèi)容到剪貼板 #test4{ height:0; width:0; overflow:hidden; font-size:0; line-height:0; border-color:#FF9600transparenttransparenttransparent; border-style:soliddasheddasheddashed; border-width:20px; }

  示例5:

  上述畫的小三角的斜邊都是依靠原來盒子的邊,還有另一種形式的小三角,斜邊在盒子的對角線上。

  CSS Code復(fù)制內(nèi)容到剪貼板 #test5{ height:0; width:0; overflow:hidden; font-size:0; line-height:0; border-color:#FF9600#3366fftransparenttransparent; border-style:solidsoliddasheddashed; border-width:40px40px00; }

  保留其中一種顏色,就可以得到斜邊在對角線上的三角形了。

  實(shí)現(xiàn)圓角效果

  可以實(shí)現(xiàn)近似圓角,其實(shí)是一個(gè)非常小的梯形展示出來的。

  XML/HTML Code復(fù)制內(nèi)容到剪貼板.test{width:200px;height:50px;} .test.top{width:194px;border-color:transparenttransparent#FF9600transparent;*border-color:pinkpink#FF9600pink;border-style:dasheddashedsoliddashed;border-width:3px;filter:chroma(color=pink);} .test.center{width:200px;height:40px;background-color:#FF9600;} .test.bottom{width:194px;height:5px;border-color:#FF9600transparenttransparenttransparent;*border-color:#FF9600pinkpinkpink;border-style:soliddasheddasheddashed;border-width:3px;filter:chroma(color=pink);}

  以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。

【CSS border虛線邊框?qū)傩越坛獭肯嚓P(guān)文章:

css屬性定位教程07-23

CSS入門教程01-25

Word段落添加邊框的教程09-22

CSS閉合浮動(dòng)元素教程06-26

CSS選擇器教程06-05

CSS教程之盒模型10-17

word中表格的邊框和底紋設(shè)置教程02-24

關(guān)于CSS教程:復(fù)合型條狀圖表01-25

CSS基礎(chǔ)教程之背景圖片07-31

CSS-層疊樣式表基礎(chǔ)教程08-10