這里寫目錄標題

Border of CSS3
- border-radius
- box-shadow
- border-image
- - border-image-source
  - border-image-slice
  - border-image-outset
  - border-image-width
  - border-image-repeat
  - - stretch
    - repeat
    - round
    - space

Border of CSS3

border-radius

border-radius: 10px 20px 30px;

border-radius: 10px 20px;

border-radius: 10px;

border-radius: 10px 20px 30px 40px;

展開寫如下：

border-top-left-radius:10px 10px;
border-top-right-radius:20px 20px;
border-bottom-right-radius:30px 30px;
border-bottom-right-radius:40px 40px;

兩個數值分別為圓角的水平半徑和垂直半徑

所以還有一種寫法：

border-radius:10px 20px 30px 40px / 10px 20px 30px 40px;

box-shadow

box-shadow的第一個屬性值是inset，是向內的陰影，如果不寫，則默認是向外的陰影，下面是方塊的初始狀態：

box-shadow: 0px 0px 0px 0px #0ff;

現在先給前兩個值增加10像素：

box-shadow: 10px 10px 0px 0px #0ff;

第一個值代表水平偏移量，第二個值代表垂直偏移量，如果為負值則向反方向移動，

現在給第四個值增加10像素：

box-shadow: 0px 0px 0px 10px #0ff;

第四個值是陰影的水平和垂直方向同時加10像素，

現在將陰影移出來，并且第三個值增加50像素：

box-shadow: 100px 010px 50px 0px #0ff;

所以第三個值是基于邊框的位置，向兩邊同時模糊，

但是box-shadow最好玩的地方是它理論上可以設定無數個值：

box-shadow: inset 0px 0px 10px 0px#fff,
                3px 0px 10px 0px #f0f,
                0px -3px 10px 0px #0ff,
                -3px 0px 10px 0px #00f,
                0px 3px 10px 0px #ff0,
                0px 3px 10px 0px #ff0;

它這里實際上有一個Z軸，越靠前的值在上層，如果兩組值一樣的話，則會有一個加重的效果，

然后用這個方法寫兩個小demo：

box-shadow: inset 0px 0px 50px #fff,
                inset 15px 0px 80px #f0f,
                inset -15px 0px 80px #0ff,
                inset 15px 0px 100px #f0f,
                inset -15px 0px 100px #0ff,
                0px 0px 50px #fff,
                -15px 0px 50px #f0f,
                15px 0px 50px #0ff;

box-shadow: 0px 0px 100px 50px #fff,
            0px 0px 100px 60px #fff,
            0px 0px 250px 125px #ff0;

border-image

border-image-source

它可以引入一張背景圖片來填充：

border-image-source:url()

也可以支持漸變色：

border-image-source: linear-gradient(red, yellow);
border-image-slice: 10;

border-image-slice

slice可以傳四個值，就是圖中四條分割線距離邊框的距離，四個值依次是top、right、bottom、left，分割成9個部分，除了中間那部分，剩下的8個部分會填充到border的邊框中，

現在用下面這張300px×300px的圖片輔助學習slice的相關屬性

    border: 100px solid black;
    border-image-slice: 100;

當然這里也可以填百分數33.3%，但是效果總歸不會有填100好，

如果沒有這個slice值，則默認為100%，就會出現下面的情況：

slice還有一個一般不會用的值fill，這個fill會讓背景圖片向內填充，

注意：在實驗程序中，偶然發現border-image-source和border-image-slice必須兩行挨在一起，中間不能有其他屬性，

border-image-outset

這個屬性可以讓背景圖片向外延申：

border-image-slice: 100;
border-image-outset: 100px;

這樣就會延申到div外面去，不可以填負值，負值沒有用，

border-image-width

默認值是1，1是1倍的意思，但是一般是不會去動這個值的，

如果值是auto的話，則是取slice的值，并且加一個像素px，

border-image-repeat

如果div變大以后，會有下面四種填充方式;

stretch

stretch會以拉伸的方式填充，這也是border-image-repeat屬性的默認值，

repeat

repeat將中間的部分按原比例切開進行填充，

round

round會將中間的部分進行拉伸或者壓縮進行填充，會一直保持著中間是菱形或者正方形，

space

space當中間的間隔不夠放下一整個正方形的時候，會用空白進行填充，

border-image是可以合在一起寫的，格式是：

border-image:source slice repeat;

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/413473.html

標籤：其他

上一篇：前后端分離 -- 深入淺出 Spring Boot + Vue 實作工程專案進度管理系統 Vue不過如此~

下一篇：前端入門（雨滴特效）