整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          上海HTML5開(kāi)發(fā)培訓(xùn)機(jī)構(gòu)大咖分享html虛線邊框設(shè)置教程

          習(xí)HTML時(shí)有時(shí)候我們需要用代碼設(shè)置邊框或虛線邊框的樣式,那該怎么設(shè)置呢?下面上海非凡進(jìn)修學(xué)院HTML5開(kāi)發(fā)培訓(xùn)機(jī)構(gòu)大咖分享下html虛線邊框設(shè)置教程,會(huì)對(duì)幾個(gè)不同標(biāo)簽加虛線邊框效果樣式,同學(xué)們可以根據(jù)示例靈活掌握與應(yīng)用到自己DIV+CSS布局中。

          為了對(duì)html不同標(biāo)簽加邊框虛線,我們選擇幾個(gè)常用標(biāo)簽對(duì)齊設(shè)置邊框虛線效果。

          1、html常用標(biāo)簽

          div標(biāo)簽

          span

          ul li

          table tr td

          2、實(shí)例用到CSS屬性單詞

          border

          width

          height

          3、實(shí)現(xiàn)虛線的CSS重點(diǎn)介紹

          border為邊框?qū)傩裕绻獙?shí)現(xiàn)對(duì)象邊框效果,要設(shè)置邊框?qū)挾取⑦吙蝾伾⑦吙驑邮剑▽?shí)線還是虛線)

          border:1px dashed #F00 這個(gè)就是設(shè)置邊框樣式寬度為1px,虛線,虛線為紅色。

          4、實(shí)例描述

          我們對(duì)以上幾個(gè)標(biāo)簽設(shè)置相同寬度、相同高度、邊框效果。

          5、HTML代碼示例:

          以上示例對(duì)html中不同標(biāo)簽設(shè)置相同的樣式,包括相同邊框虛線。

          上海HTML5開(kāi)發(fā)培訓(xùn)機(jī)構(gòu)大咖提示邊框三個(gè)樣式

          通常我們可以對(duì)邊框設(shè)置寬度(厚度)、邊框樣式、邊框顏色這三個(gè)屬性與參數(shù)。

          1)、邊框顏色:border-color:#000

          2)、邊框厚度(寬度):border-width:1px

          使用數(shù)字+單位設(shè)置邊框厚度寬度,如1px(邊框厚度寬度為1像素),邊框必須為正數(shù)字,大于0的數(shù)值。否則設(shè)置邊框border樣式無(wú)效。

          3)、border邊框樣式:border-style:solid

          上海HTML5開(kāi)發(fā)培訓(xùn)機(jī)構(gòu)大咖提示:邊框border樣式值如下:

          none :無(wú)邊框。與任何指定的border-width值無(wú)關(guān)

          hidden : 隱藏邊框。IE不支持

          dotted : 在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為點(diǎn)線。否則為實(shí)線(常用)

          dashed : 在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為虛線。否則為實(shí)線(常用)

          solid :實(shí)線邊框(常用)

          double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值

          groove : 根據(jù)border-color的值畫(huà)3D凹槽

          ridge :根據(jù)border-color的值畫(huà)菱形邊框

          inset : 根據(jù)border-color的值畫(huà)3D凹邊

          outset : 根據(jù)border-color的值畫(huà)3D凸邊

          天,我們來(lái)看這么一個(gè)非常常見(jiàn)的切圖場(chǎng)景,我們需要一個(gè)帶圓角的虛線邊框,像是這樣:

          這個(gè)我們使用 CSS 還是可以輕松解決的,代碼也很簡(jiǎn)單,核心代碼:

          div {
          border-radius: 25px;
          border: 2px dashed #aaa;
          }

          但是,原生的 dashed 有一個(gè)問(wèn)題,就是我們無(wú)法控制虛線的單段長(zhǎng)度與間隙

          假設(shè),我們要這么一個(gè)效果呢虛線效果呢:

          此時(shí),由于無(wú)法控制 border: 2px dashed #aaa 產(chǎn)生的虛線的單段長(zhǎng)度與線段之間的間隙,border 方案就不再適用了。

          那么,在 CSS 中,我們還有其它方式能夠?qū)崿F(xiàn)帶圓角,且虛線的單段長(zhǎng)度與線段之間間隙可控的方式嗎?

          本文,我們就一起探討探討。

          實(shí)現(xiàn)不帶圓角的虛線效果

          上面的場(chǎng)景,使用 CSS 實(shí)現(xiàn)起來(lái)比較麻煩的地方在于,圖形有一個(gè) border-radius。

          如果不帶圓角,我們可以使用漸變,很容易的模擬虛線效果。

          我們可以使用線性漸變,輕松的模擬虛線的效果:

          div {
          width: 150px;
          height: 100px;
          background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
          background-size: 4px 1px;
          background-position: 0 0;
          }

          看看,使用漸變模擬的虛線如下:

          解釋一下上面的代碼:

          1. linear-gradient(90deg, #333 50%, transparent 0),實(shí)現(xiàn)一段漸變內(nèi)容,100% - 50% 的內(nèi)容是 #333 顏色,剩下的一半 50% - 0 的顏色是透明色 transprent
          2. repeat-x 表示只在 x 方向重復(fù)
          3. background-size: 4px 1px 表示上述漸變內(nèi)容的長(zhǎng)寬分別是 4px\ 1px,這樣配合 repeat-x就能實(shí)現(xiàn)只有 X 方向的重復(fù)
          4. 最后的 background-position: 0 0 控制漸變的定位

          因此,我們只需要修改 background 的參數(shù),就可以得到各種不一樣的虛線效果:

          完整的代碼,你可以戳這里:CodePen Demo -- Linear-gradient Dashed Effect

          并且,漸變是支持多重漸變的,因此,我們把容器的 4 個(gè)邊都用漸變表示即可:

          div {
          background:
          linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
          linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
          linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
          linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
          background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
          background-position: 0 0, 0 100%, 0 0, 100% 0;
          }

          效果如下:

          但是,如果要求的元素帶 border-radius 圓角,這個(gè)方法就不好使了,整個(gè)效果就會(huì)穿幫。

          因此,在有圓角的情況下,我們就需要另辟蹊徑。

          利用漸變實(shí)現(xiàn)帶圓角的虛線效果

          當(dāng)然,本質(zhì)上我們還是需要借助漸變效果,只是,我們需要轉(zhuǎn)換一下思路。

          譬如,我們可以使用角向漸變。

          假設(shè),我們有這么一個(gè)帶圓角的元素:

          <div></div>
          div {
          width: 300px;
          height: 200px;
          background: #eee;
          border-radius: 20px;
          }

          效果如下:

          如果我們修改內(nèi)部的 background: #eee,把它替換成重復(fù)角向漸變的這么一個(gè)圖形:

          div {
          //...
          - background: #eee;
          + background: repeating-conic-gradient(#000, #000 3deg, transparent 3deg, transparent 6deg);
          }

          解釋一下,這段代碼創(chuàng)建了一個(gè)重復(fù)的角向漸變背景,從黑色(#000)開(kāi)始,每 3deg 變?yōu)橥该鳎缓笤購(gòu)耐该鞯胶谏源搜h(huán)重復(fù)。

          此時(shí),這樣的背景效果可用于創(chuàng)建一種漸變黑色到透明的重復(fù)紋理效果:

          在這個(gè)基礎(chǔ)上,我們只需要給這個(gè)圖形上層,再利用偽元素,疊加一層顏色,就得到了我們想要的邊框效果,并且,邊框間隙和大小可以簡(jiǎn)單調(diào)整。

          完整的代碼:

          div {
          position: relative;
          width: 300px;
          height: 200px;
          border-radius: 20px;
          background: repeating-conic-gradient(#000, #000 3deg, transparent 3deg, transparent 6deg);
          
          &::before {
          content: "";
          position: absolute;
          inset: 1px;
          background: #eee;
          border-radius: 20px;
          }
          }

          效果如下:

          乍一看,效果還不錯(cuò)。但是如果仔細(xì)觀察,會(huì)發(fā)現(xiàn)有一個(gè)致命問(wèn)題:虛線線段的每一截長(zhǎng)度不一致

          只有當(dāng)圖形的高寬一致時(shí),線段長(zhǎng)度才會(huì)一致。高寬比越遠(yuǎn)離 1,差異則越大:

          完整的代碼,你可以戳這里:CodePen Demo -- BorderRadius Dashed Border

          那有沒(méi)有辦法讓虛線長(zhǎng)度能夠保持一樣呢?

          可以!我們?cè)贀Q一種漸變,我們改造一下底下的角向漸變,重新利用重復(fù)線性漸變:

          div {
          border-radius: 20px;
          background:
          repeating-linear-gradient(
          -45deg,
          #000 0,
          #000 7px,
          transparent 7px,
          transparent 10px
          );
          }

          此時(shí),我們能得到這樣一個(gè)斜 45° 的重復(fù)線性漸變圖形:

          與上面方法一類似,再通過(guò)在這個(gè)圖形的基礎(chǔ)上,在元素中心,疊加多一層純色遮罩圖形,只漏出最外圍一圈的圖形,帶圓角的虛線邊框就實(shí)現(xiàn)了:

          此方法比上面第一種漸變方法更好之處在于,虛線每一條線段的長(zhǎng)度是固定的!是不是非常的巧妙?

          完整的代碼,你可以戳這里:CodePen Demo -- BorderRadius Dashed Border

          最佳解決方案:SVG

          當(dāng)然,上面使用 CSS 實(shí)現(xiàn)帶圓角的虛線邊框,還是需要一定的 CSS 功底。

          并且,不管是哪個(gè)方法,都存在一定的瑕疵。譬如如果希望邊框中間不是背景色,而是鏤空的,上述兩種 CSS 方式都將不再使用。

          因此,對(duì)于帶圓角的虛線邊框場(chǎng)景,最佳方式一定是 SVG。(切圖也算是吧,但是靈活度太低)

          只是很多人看到 SVG 會(huì)天然的感到抗拒,或者認(rèn)為 SVG 不太好掌握。

          所以,本文再介紹一個(gè)非常有用的開(kāi)源工具 -- Customize your CSS Border:

          通過(guò)這個(gè)開(kāi)源工具,我們可以快速生成我們想要的虛線邊框效果,并且一鍵復(fù)制可以嵌入到 CSS background 中的 SVG 代碼圖片格式。

          圖形的大小、邊框的粗細(xì)、虛線的線寬與間距,圓角大小統(tǒng)統(tǒng)是可以可視化調(diào)整的。

          通過(guò)一個(gè)動(dòng)圖,簡(jiǎn)單感受一下:

          總結(jié)一下

          本文介紹了 2 種在 CSS 中,不借助切圖和 SVG 實(shí)現(xiàn)帶圓角的虛線邊框的方式:

          1. 重復(fù)角向漸變疊加遮罩層
          2. 重復(fù)線性漸變疊加遮罩層

          當(dāng)然,兩種 CSS 方式都存在一定瑕疵,但是對(duì)于一些簡(jiǎn)單場(chǎng)景是能夠 Cover 住的。

          最后,介紹了借助 SVG 工具 Customize your CSS Border 快速生成帶圓角的虛線邊框的方式。將 SVG 生成的矢量圖像數(shù)據(jù)直接嵌入到 background URL 中,能夠應(yīng)付幾乎所有場(chǎng)景,相對(duì)而言是更好的選擇。

          最后

          好了,本文到此結(jié)束,希望本文對(duì)你有所幫助 :)


          作者:Chokcoco
          鏈接:https://juejin.cn/post/7311681326712487999

          order 盒子邊框

          復(fù)合屬性。設(shè)置對(duì)象邊框的特性。

          盒子邊框三要素:

          ① 邊框粗細(xì)

          ② 邊框樣式

          ③ 邊框顏色

          語(yǔ)法:border: border-width | border-style | border-color ;

          邊框四邊的粗細(xì)、樣式、顏色,以及上下左右每個(gè)位置的樣式屬性都是可以單獨(dú)調(diào)整的。

          邊框的顏色不是必要的,如果不指定顏色,默認(rèn)顏色為黑色,但必須為盒子指定寬高。


          初始 HTML

           <!DOCTYPE html>
           <html>
           <head>
               <meta charset="UTF-8">
               <meta name="viewport" content="width=device-width, initial-scale=1.0">
               <title>Document</title>
               <style>
                   div{
                       width: 500px;
                       height: 50px;
                   }
               </style>
           </head>
           <body>
               <div></div>
           </body>
           </html>




          邊框樣式

          使用 border-style 可為盒子邊框設(shè)置樣式,以下示例為實(shí)線

           /* CSS代碼 */
           div{
               width: 500px;
               height: 50px;
               border-style: solid; 
           }

          效果:


          可單獨(dú)針對(duì)某一方向設(shè)置邊框樣式

          示例 CSS 代碼

          • 上邊:border-top-style: double; (雙線)
          • 右邊:border-right-style: solid; (實(shí)線)
          • 下邊:border-bottom-style: dashed; (虛線)
          • 左邊:border-left-style: dotted; (點(diǎn)線)


          border-style 說(shuō)明

          • 如果提供全部四個(gè)參數(shù)值,將按上、右、下、左的順序作用于四邊。
          • 如果只提供一個(gè),將用于全部的四邊。
          • 如果提供兩個(gè),第一個(gè)用于上、下,第二個(gè)用于左、右。
          • 如果提供三個(gè),第一個(gè)用于上,第二個(gè)用于左、右,第三個(gè)用于下。
          • 如果border-width等于0,本屬性將失去作用。

          如果需要設(shè)置不同方向的樣式屬性,可以寫(xiě)在一句 CSS 代碼里,比如說(shuō)下面這段代碼,上下實(shí)線,左右虛線。

           /* CSS代碼 */
           div{
               width: 500px;
               height: 50px;
               border-style: solid dashed;
           }

          效果:


          border-style 樣式屬性值

          屬性值解釋none無(wú)輪廓。 border-color將被忽略,border-width計(jì)算值為0,除非邊框輪廓為圖像,即border-image。hidden隱藏邊框。IE7及以下尚不支持dotted點(diǎn)狀輪廓。IE6下顯示為dashed效果dashed虛線輪廓solid實(shí)線輪廓double雙線輪廓。兩條單線與其間隔的和等于指定的border-width值groove3D凹槽輪廓ridge3D凸槽輪廓inset3D凹邊輪廓outset3D凸邊輪廓




          邊框粗細(xì)

          使用 border-width 可為盒子邊框設(shè)置粗細(xì),以下示例邊框?yàn)?5px 粗細(xì)

           /* CSS代碼 */
           div{
               width: 500px;
               height: 50px;
               border-style: solid;
               border-width: 5px;
           }

          效果


          可單獨(dú)針對(duì)某一方向設(shè)置邊框粗細(xì)

          示例 CSS 代碼

          • 上邊:border-top-width: 10px; (雙線)
          • 右邊:border-right-width: 10px; (實(shí)線)
          • 下邊:border-bottom-width: 10px; (虛線)
          • 左邊:border-left-width: 10px; (點(diǎn)線)


          border-width 說(shuō)明

          • 如果提供全部四個(gè)參數(shù)值,將按上、右、下、左的順序作用于四邊。
          • 如果只提供一個(gè),將用于全部的四邊。
          • 如果提供兩個(gè),第一個(gè)用于上、下,第二個(gè)用于左、右。
          • 如果提供三個(gè),第一個(gè)用于上,第二個(gè)用于左、右,第三個(gè)用于下。
          • 如果border-style設(shè)置為none或hidden,border-width的使用值將為0。

          如果需要設(shè)置不同方向的邊框粗細(xì),可以寫(xiě)在一句 CSS 代碼里。

          比如說(shuō)下面這段代碼,上下2px,右2px,左5px。

           /* CSS代碼 */
           div{
               width: 500px;
               height: 50px;
               border-style: solid;
               border-width:2px 2px 2px 5px;
           }

          效果:




          邊框顏色

          可直接輸入

          顏色的英文名稱

          rgb值

          十六進(jìn)制

          使用 border-color 可為盒子邊框設(shè)置顏色,以下示例邊框顏色為紅色。

           /* CSS代碼 */
           div{
               width: 500px;
               height: 50px;
               border-style: solid;
               border-width:2px 2px 2px 5px;
               border-color: red;
           }

          效果:


          可單獨(dú)針對(duì)某一方向設(shè)置邊框顏色

          示例 CSS 代碼

          • 上邊:border-top-color: 10px;
          • 右邊:border-right-color: 10px;
          • 下邊:border-bottom-color: 10px;
          • 左邊:border-left-color: 10px;


          border-color 說(shuō)明

          • 如果提供全部四個(gè)參數(shù)值,將按上、右、下、左的順序作用于四邊。
          • 如果只提供一個(gè),將用于全部的四邊。
          • 如果提供兩個(gè),第一個(gè)用于上、下,第二個(gè)用于左、右。
          • 如果提供三個(gè),第一個(gè)用于上,第二個(gè)用于左、右,第三個(gè)用于下。
          • 如果border-width等于0或border-style設(shè)置為none,本屬性將被忽略。

          上面有兩個(gè)示例講述如何設(shè)置不同方向的屬性,border-color 也是相同使用方法,此處就不做示例了。




          border 是復(fù)合屬性

          如果你需要同時(shí)設(shè)置盒子的粗細(xì)、樣式、顏色,那么你可以將他們的樣式表寫(xiě)在同一行代碼里。

          例如:

           /* CSS代碼 */
           div{
               border-top: 5px solid red;
           }

          這段代碼指定了上邊框的三個(gè)屬性:粗細(xì)、樣式、顏色

          border-top 包含了:

          • border-top-width: 5px;
          • border-top-style: solid;
          • border-top-color: red;

          其他同理




          教你用 CSS 畫(huà)個(gè)三角形

          先來(lái)看一個(gè)示例

           /* CSS代碼 */
           div{
               width: 100px;
               height: 100px;
               border-top: 50px solid red;
               border-right: 50px solid blue;
               border-bottom: 50px solid green;
               border-left: 50px solid pink;
           }

          效果:

          細(xì)心的你,一定發(fā)現(xiàn)了 border 的邊框四條邊交接處是斜角。


          此刻我們把盒子的寬高設(shè)置為 0

           /* CSS代碼 */
           div{
               width: 0;
               height: 0;
               border-top: 50px solid red;
               border-right: 50px solid blue;
               border-bottom: 50px solid green;
               border-left: 50px solid pink;
           }

          效果:

          是不是完完全全像四個(gè)三角形一樣。

          我們只需要把上邊和左右兩邊的三角形隱藏起來(lái),它不就是一個(gè)三角形了。

          為 border-color 指定 transparent 值,使盒子邊框顏色變透明

           /* CSS代碼 */
           div{
               width: 0;
               height: 0;
               border-top: 50px solid transparent;
               border-right: 50px solid transparent;
               border-bottom: 50px solid green;
               border-left: 50px solid transparent;
           }

          效果:

          把另外三條邊透明之后,就只剩一個(gè)三角形了。





          部分資料引用自:

          • http://caibaojian.com/css3/properties/border/index.htm

          主站蜘蛛池模板: 久久99国产精一区二区三区| 国产成人无码aa精品一区| 日韩人妻无码免费视频一区二区三区| 国产人妖在线观看一区二区| 久久综合一区二区无码| 无码精品黑人一区二区三区 | 亚洲AV日韩精品一区二区三区| 一区二区三区影院| 中文字幕精品一区二区| 国产一区玩具在线观看| 精品久久综合一区二区| 91在线一区二区三区| 亚洲国产激情一区二区三区 | 国产伦精品一区三区视频| 91香蕉福利一区二区三区| 在线精品亚洲一区二区三区| 成人免费视频一区二区三区| 亚洲AV福利天堂一区二区三| 一区二区三区在线免费| 国产精品视频无圣光一区| 99久久无码一区人妻a黑| 国产一区二区电影在线观看| 熟妇人妻一区二区三区四区| 日韩精品无码人妻一区二区三区| 在线播放精品一区二区啪视频| 少妇人妻精品一区二区三区| 日本不卡一区二区三区视频| 国产一区二区视频在线播放| 在线视频一区二区三区三区不卡 | 亚洲视频一区在线| 无码少妇丰满熟妇一区二区| 99偷拍视频精品一区二区| 国产日韩精品视频一区二区三区| 精品国产一区二区三区麻豆| 日韩中文字幕精品免费一区| 亚洲爆乳精品无码一区二区| 国产伦精品一区二区三区无广告| 免费无码AV一区二区| 国产av一区二区三区日韩 | 亚洲丶国产丶欧美一区二区三区| 国产午夜精品一区二区三区极品 |