css實(shí)現(xiàn)四角邊框效果

發(fā)布時(shí)間：2024-09-24 15:08:35 作者：墨·殤

本文介紹了如何通過(guò)CSS實(shí)現(xiàn)具有四角邊框的效果,使用了linear-gradient和background屬性來(lái)創(chuàng)建邊框,并設(shè)置了背景尺寸,文章還提供了Vue中圖片資源引用的示例代碼,適合想要為網(wǎng)頁(yè)元素添加特別邊框效果的開(kāi)發(fā)者學(xué)習(xí)

css實(shí)現(xiàn)四角邊框

html：

   <div
            class="box"
            v-for="(item, index) in coldBaseInfo.stationModelList"
            :key="index"
          >
            <div class="boxleft">
              <img :src="photo[index]" alt="Image" />
            </div>

vue2：

  photo: [
        require("@/assets/img/bigscreen/two.jpg"),
        require("@/assets/img/bigscreen/four.png"),
        require("@/assets/img/bigscreen/five.jpg"),
        require("@/assets/img/bigscreen/ten.jpg"),
      ],

css：

.boxleft {
  background: linear-gradient(to left, #04C886, #04C886) left top no-repeat,
        linear-gradient(to bottom, #04C886, #04C886) left top no-repeat,
        linear-gradient(to left, #04C886, #04C886) right top no-repeat,
        linear-gradient(to bottom, #04C886, #04C886) right top no-repeat,
        linear-gradient(to left, #04C886, #04C886) left bottom no-repeat,
        linear-gradient(to bottom, #04C886, #04C886) left bottom no-repeat,
        linear-gradient(to left, #04C886, #04C886) right bottom no-repeat,
        linear-gradient(to left, #04C886, #04C886) right bottom no-repeat;
    background-size: 2px 10px, 10px 2px, 2px 10px, 10px 2px;
  img {
    width: 100%;
    height: 100%;
    padding: 4px;
    border: 2px solid #7fb1c580;
  } 
}

到此這篇關(guān)于css實(shí)現(xiàn)四角邊框效果的文章就介紹到這了,更多相關(guān)css四角邊框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

Tag：css 四角邊框

相關(guān)文章

css背景和邊框標(biāo)簽實(shí)例詳解
本文通過(guò)代碼給大家介紹css背景和邊框標(biāo)簽的一些知識(shí)，通過(guò)相關(guān)屬性設(shè)置背景顏色，背景圖像，對(duì)css背景與邊框的相關(guān)知識(shí)感興趣的朋友一起看看吧
2021-05-21
css 中多種邊框的實(shí)現(xiàn)小竅門(mén)
這篇文章主要介紹了css 中多種邊框的實(shí)現(xiàn)小竅門(mén),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)
2021-04-07
html+css合并表格邊框的示例代碼
這篇文章主要介紹了html+css合并表格邊框的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)
2021-03-31
一文教你玩轉(zhuǎn)CSS border(邊框)
這篇文章主要介紹了一文教你玩轉(zhuǎn)CSS border(邊框),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-02-19
CSS 奇思妙想邊框動(dòng)畫(huà)效果的實(shí)現(xiàn)
這篇文章主要介紹了CSS 奇思妙想邊框動(dòng)畫(huà)效果的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-01-18
CSS border邊框一半或者部分可見(jiàn)的實(shí)現(xiàn)代碼
這篇文章主要介紹了CSS border邊框一半或者部分可見(jiàn)的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-12-07
css 收貨地址平行四邊形的線條樣式示例代碼
這篇文章主要介紹了css 收貨地址平行四邊形的線條樣式示例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-10-09