亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時間：2024-09-24 15:08:35   作者：墨·殤   我要評論
本文介紹了如何通過CSS實(shí)現(xiàn)具有四角邊框的效果,使用了linear-gradient和background屬性來創(chuàng)建邊框,并設(shè)置了背景尺寸,文章還提供了Vue中圖片資源引用的示例代碼,適合想要為網(wǎng)頁元素添加特別邊框效果的開發(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • css背景和邊框標(biāo)簽實(shí)例詳解

    本文通過代碼給大家介紹css背景和邊框標(biāo)簽的一些知識，通過相關(guān)屬性設(shè)置背景顏色，背景圖像，對css背景與邊框的相關(guān)知識感興趣的朋友一起看看吧
    2021-05-21

  • css 中多種邊框的實(shí)現(xiàn)小竅門

    這篇文章主要介紹了css 中多種邊框的實(shí)現(xiàn)小竅門,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)
    2021-04-07

  • html+css合并表格邊框的示例代碼

    這篇文章主要介紹了html+css合并表格邊框的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)
    2021-03-31

  • 一文教你玩轉(zhuǎn)CSS border(邊框)

    這篇文章主要介紹了一文教你玩轉(zhuǎn)CSS border(邊框),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-02-19

  • CSS 奇思妙想邊框動畫效果的實(shí)現(xiàn)

    這篇文章主要介紹了CSS 奇思妙想邊框動畫效果的實(shí)現(xiàn),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-01-18

  • CSS border邊框一半或者部分可見的實(shí)現(xiàn)代碼

    這篇文章主要介紹了CSS border邊框一半或者部分可見的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-12-07

  • css 收貨地址平行四邊形的線條樣式示例代碼

    這篇文章主要介紹了css 收貨地址平行四邊形的線條樣式示例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-10-09

最新評論