不常見的CSS

border-image

        #box{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: orange;
            /*注意：給div設置一個透明的border，否則顯示會出現問題*/
            border: 1px solid transparent;
            /*圖片路徑*/
            border-image-source: url(img/border.png);
            /*圖片邊框向內偏移，用來分解引用的圖片，拆分成九宮格*/
            border-image-slice: 26 26 26 26;
            /*圖片邊框的寬度*/
            border-image-width: 30px;
            /*邊框是否平鋪（repeated） 鋪滿（round）拉伸（strech）*/
            border-image-repeat: round;
        }
Paste_Image.png
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 原文地址http://www.mark.ah.cn 定義 簡寫屬性是可以讓你同時設置其他幾個 CSS 屬性值的 C...
    markahcn閱讀 1,177評論 0贊 1
  • 1、垂直對齊 如果你用CSS，則你會有困惑：我該怎么垂直對齊容器中的元素？現在，利用CSS3的Transform，...
    kiddings閱讀 3,200評論 0贊 11
  • 怎么設置 CSS border 虛線之間間隔（密度） 來源：極客頭條 怎么設置 CSS border 虛線之間間隔...
    Xnzhg閱讀 15,520評論 1贊 1
  • 注：如若轉載請注明來源。 “閨中佳人思君歸，無奈天明守空閨” 年度盛典《卷珠簾》毫不客氣的當選了中國好歌曲。一首藏...
    石言君閱讀 3,374評論 0贊 3
  • 黑武士大師維達是帶著悲劇以及矛盾色彩的人物形象，雖然他擁有強大的原力與高超的武藝，但最終還是沒能阻止母親和愛妻的死...
    無印極品閱讀 654評論 0贊 0