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

css 邊框添加四個(gè)角的實(shí)現(xiàn)代碼

  發(fā)布時(shí)間：2021-10-14 16:15:02   作者：涼面好好吃   我要評(píng)論
這篇文章主要介紹了css 邊框添加四個(gè)角的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1、html

<div class="loginbody">
          <div class="border_corner border_corner_left_top"></div>
          <div class="border_corner border_corner_right_top"></div>
          <div class="border_corner border_corner_left_bottom"></div>
          <div class="border_corner border_corner_right_bottom"></div>

　　　　  　<--other……………………-->
 </div>

2、css

.loginbody{
        border: 1px solid #21a7e1;
        box-shadow: 5px 5px 10px 10px  rgba(24,68,124,0.4);
        padding-top:20px;
        border-radius: 6px;
        position: relative;
      }

      /*四個(gè)角框*/
      .border_corner{
        z-index: 2500;
        position: absolute;
        width: 19px;
        height: 19px;
        background: rgba(0,0,0,0);
        border: 4px solid #1fa5f1;
      }
      .border_corner_left_top{
        top: -2px;
        left: -2px;
        border-right: none;
        border-bottom: none;
        border-top-left-radius: 6px;
      }
      .border_corner_right_top{
        top: -2px;
        right: -2px;
        border-left: none;
        border-bottom: none;
        border-top-right-radius: 6px;
      }
      .border_corner_left_bottom{
        bottom: -2px;
        left: -2px;
        border-right: none;
        border-top: none;
        border-bottom-left-radius: 6px;
      }
      .border_corner_right_bottom{
        bottom: -2px;
        right: -2px;
        border-left: none;
        border-top: none;
        border-bottom-right-radius: 6px;
      }

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

相關(guān)文章

  • 通過(guò)CSS邊框?qū)崿F(xiàn)三角形和箭頭的實(shí)例代碼

    這篇文章主要介紹了通過(guò)CSS邊框?qū)崿F(xiàn)三角形和箭頭的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-01-15

  • css效果之邊框內(nèi)圓角

    這篇文章主要介紹了css效果之邊框內(nèi)圓角的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)
    2019-06-19

  • CSS3徑向漸變r(jià)adial-gradient實(shí)現(xiàn)波浪邊框和內(nèi)倒角的方法

    這篇文章主要介紹了CSS3徑向漸變r(jià)adial-gradient實(shí)現(xiàn)波浪邊框和內(nèi)倒角的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友
    2019-02-19

  • CSS圓角邊框制作指南與實(shí)例

    這篇文章主要介紹了CSS圓角邊框制作指南與實(shí)例,這里突出講解了以純代碼實(shí)現(xiàn)的小圓角 來(lái)消滅鋸齒的方法,需要的朋友可以參考下
    2016-03-10

  • div+css用邊框?qū)崿F(xiàn)圓角矩形(多樣式)

    css圓角卷起了一陣風(fēng)波，只用css來(lái)做圓角矩形的技術(shù)很早就有了,但是在網(wǎng)頁(yè)的設(shè)計(jì)過(guò)程中,我們通常用圖片實(shí)現(xiàn)圓角矩形效果?，F(xiàn)在網(wǎng)上很多關(guān)于無(wú)圖片實(shí)現(xiàn)css圓角矩形的方法,雖
    2013-03-25

最新評(píng)論