前言

border 主要用途是設定物件的邊框線, outline 是設定物件的外框線,這兩個很類似,但卻有一些細節有所差異,可以簡單用下列兩點快速比較:

  1. border 可以有「 占據空間 」的特性, outline 則沒有。
  2. border 的外觀可以做圓角, outline 則永遠為矩形( 物件的矩形空間 )。

因為 border 可以支援圓角,所以在實務使用次數上面, border 的機會也多過於 outline 。( 以我來說啦哈哈哈 )

圖片來源

 


 

border 屬性

屬性 說明
border 簡寫屬性,設置所有的邊框屬性。
border-color 設置邊框的顏色。
border-style 用於設置元素邊框的樣式。
border-width 簡寫屬性,為元素的邊框設置寬度。
border-radius 簡寫屬性,用於設置四個 border-radius 屬性。
border-image 簡寫屬性,用於設置圖片邊框。
border-image-source 規定要使用的圖像,代替 border-style 屬性中設置的邊框樣式。
border-image-slice 規定圖像邊框的向內偏移。
border-image-width 規定圖像邊框的寬度。
border-image-outset 規定邊框圖像超過邊框盒的量,相當於把原來的貼圖位置向外延伸,可以把 border image area 的區域延伸到border-box之外。
border-image-repeat 規定圖像邊框是否應該被重複( repeat )、拉伸( stretch )或鋪滿( round、space )。

 


 

border

border 簡寫屬性在一個聲明設置所有的邊框屬性。

屬性 說明
border-width 規定邊框的寬度。
border-style 規定邊框的樣式。
border-color 規定邊框的顏色。

我們還可以分別設定四邊的數值。

div {
  border-top: 1px solid #000; //上框線
  border-bottom: 4px dotted #009FCC; //下框線
  border-left: 2px dashed #FF8800; //左框線
  border-right: 1px solid #7A0099; //右框線
}

 


 

border-color

border-color 屬性設置四條邊框的顏色,此屬性可設置 1 到 4 種方位的顏色。

border-color: red green blue pink;
邊框顏色:上紅 右綠 下藍 左粉;

屬性 說明
color_name 規定顏色值為顏色名稱的邊框顏色( 比如 red )。
hex_number 規定顏色值為十六進制值的邊框顏色( 比如 #ff0000 )。
rgb_number 規定顏色值為 rgb 代碼的邊框顏色( 比如 rgb(255,0,0) )。
transparent 默認值,邊框顏色為透明。

 


 

border-style

border-style 屬性用於設置元素所有邊框的樣式,或者單獨地為各邊設置邊框樣式,只有當這個值不是 none 時邊框才可能出現。

邊線的寬度於不同的風格樣式下、有些不同的效果、不同的瀏覽器於立體框顏色顯示亦不同。

div {
    border-width: 5px;
    border-color: #555;
    border-style:
        none | hidden | dotted | dashed | solid | 
        double | groove | ridge | inset | outset; 
}

 

描述 範例
none 定義無邊框。
hidden 與 none 相同。
不過應用於表時除外,對於表, hidden 用於解決邊框衝突。
dotted 定義點狀邊框。
dashed 定義分段線。
solid 定義實線。
double 定義雙線,
雙線的寬度等於 border-width 的值。
groove 定義立體內凸邊框,
其效果取決於 border-color 的值。
ridge 定義立體浮凸邊框,
其效果取決於 border-color 的值。
inset 定義凹邊框,
其效果取決於 border-color 的值。
outset 定義凸邊框,
其效果取決於 border-color 的值。

( 上表圖片來源皆截至 Chrome 瀏覽器 )

 


 

border-width

border-width 簡寫屬性為元素的所有邊框設置寬度,或者單獨地為各邊邊框設置寬度。

只有當邊框樣式不是 none 時才起作用,不允許指定負長度值,可用的值除了數字以外,也可以用 thin ( 薄 )、 medium ( 中等 )、 thick ( 厚 )。

語法 範例與描述 圖示
單值 border-width: 1em;
用一個值定義所有四邊
雙值 border-width: 1em 2em;
第一個值代表上下邊,第二個值則是左右邊。
三值 border-width: 1em 2em 3em;
第一個值代表上邊,第二個值代表左右邊,而第三個值代表下邊。
四值 border-width: 1em 2em 3em 4em;
這四個值分別代表上、右、下、左邊,順時針的方向由上開始排列。

 


 

border-radius

border-radius 屬性是一個簡寫屬性,用於設置四個 border-方位-radius 屬性。

描述
length 定義圓角的形狀。
% 以百分比定義圓角的形狀。

border-top-left-radius:左上角。
border-top-right-radius:右上角。
border-bottom-right-radius:右下角。
border-bottom-left-radius:左下角。

語法 範例與描述 圖示
單值 border-radius: 1em;
用一個值定義所有四角。
雙值 border-radius: 1em 2em;
第一個值代表左上和右下角,第二個值則是右上及左下角。
三值 border-radius: 1em 2em 3em;
第一個值代表左上角,第二個值代表右上及左下角,第三個值則是右下角。
四值 border-radius: 1em 2em 3em 4em;
這四個值分別代表左上、右上、右下、左下,由左上開始的順時針排序。

 

每一個圓角又分為 X 軸( 水平 )及 Y 軸( 垂直 ),先設定 X 軸( 水平 )再設定 Y 軸( 垂直 )。

所以如果想特別指定的話:

.left {
  border-radius: 10px / 30px; /* horizontal radius / vertical radius */
}
.right {
  border-radius: 30px / 10px; /* horizontal radius / vertical radius */
}

上面寫法也可以改成這樣

.left {
  border-radius: 10px 10px 10px 10px / 30px 30px 30px 30px;
}
.right {
  border-radius: 30px 30px 30px 30px / 10px 10px 10px 10px;
}
.left {
  border-top-left-radius: 10px 30px;
  border-top-right-radius: 10px 30px;
  border-bottom-right-radius: 10px 30px;
  border-bottom-left-radius: 10px 30px;
}
.right {
  border-top-left-radius: 30px 10px;
  border-top-right-radius: 30px 10px;
  border-bottom-right-radius: 30px 10px;
  border-bottom-left-radius: 30px 10px;
}

 


 

border-image

border-image 屬性是一個簡寫屬性,用於設置以下屬性:

屬性 說明
border-image-source 用在邊框的圖片的路徑。
border-image-slice 圖片邊框向內偏移。
border-image-width 圖片邊框的寬度。
border-image-outset 邊框圖像區域超出邊框的量。
border-image-repeat 圖像邊框是否應平鋪( repeated )、鋪滿( rounded )或拉伸( stretched )。

border-image: none | < uri > [ < number > | < percentage >]{4} [ / < border-width >{1,4} ]? [ stretch | repeat | round ]{0,2}

border-image 通過指定一張圖片來取代 border-style 定義的樣式,但 border-image 生效的前提是: border-style 和 border-width 同時為有效值( 即 border-style 不為 none , border-width 不為 0 )。

Firefox 支持替代的 -moz-border-image 規則, Opera 支持替代的 -o-border-image 規則, Safari 和 Chrome 支持替代的 -webkit-border-image 規則。

div {
    -moz-border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch;
    -o-border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch;
    -webkit-border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch;
    border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch;
}

小工具 border-image-generator ,只要將邊框圖載入後,就可用控制 bar 的方式,來分割出邊框圖的區域範圍,同時下方還會即時的顯示分割好的重覆畫面會長怎樣,當確定沒問題後,再把語法複製並貼到自己的網頁中。

徑向漸變不僅可以作為 background 的背景圖,還可以作為 border-image 的邊框圖使用,只可惜 border-image 是無法和 border-radius 同時生效的。

.radial-gradient {
    width: 300px;
    height: 200px;
    border: 50px solid;
    -webkit-border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch;
    border-image: radial-gradient(circle, transparent 50px, yellow 51px, red) 50 stretch;
}

 


 

border-image-source

border-image-source 屬性規定要使用的圖像,代替 border-style 屬性中設置的邊框樣式。

 


 

border-image-slice

border-image-slice 就像忍者一樣,對!沒錯!我太愛拿忍者舉例哈哈哈,它會在圖片上切四刀,形成一個九宮格,保留頭顱和四肢後,再來決定中間的部分要怎麼處理,現在就帶你去了解一下。

圖片來源

 

border-image-slice 屬性規定圖像邊框的向內偏移。指定 4 個值( 4 條分割線: top , right , bottom , left )將 border-image-source 分割成 9 宮格。

所以border-image-slice : 30% 35% 40% 30%;
即是距離圖片上部 30% 的地方,距離右邊 35% ,距離底部 40% ,左邊 30% 的地方各剪裁一下。也就是對圖片進行了四刀切,形成九宮格。

 

屬性 說明
number 數字值,代表圖像中像素( 如果是光柵圖像 )或矢量坐標( 如果是矢量圖像 )。
% 相對於圖像尺寸的百分比值:圖像的寬度影響水平偏移,高度影響垂直偏移。
fill 保留邊框圖像的中間部分。

 

number 不帶單位, 1 代表 1 個圖片像素。

錯誤寫法

border-image-slice: 30px 30px 30px 30px;

要把單位全部都拿掉如下

border-image-slice: 30 30 30 30;

 

如果在 border-image-slice 中給出 fill 關鍵字,則中間圖像背景會被保留。

border-image: url(img.png) 27 27 27 27 fill;

 

如果有 border-image-width / border-image-outset 屬性值, border-image-slice 必須指定數值,否則不合語法,如:

border-image: url(box.png) 27 27 27 27 / 10px / 10px;

下方為 錯誤寫法

border-image: url(box.png) / 10px / 10px;

 

如果對背景圖上下左右進行 100% 的切割,即 div 四個角為整張背景圖,由於切割超過 50% ,兩個角之間的背景圖沒有重合部分,所以 border-image 無法進行拉伸。

div{
    width: 300px;
    height: 300px;
    border-width: 50px;
    border-image: url(img.png) 100% round;
    background: #ccc;
}

 


 

border-image-width

border-image-width 屬性規定圖像邊框的寬度,參數不能為負值,預設值為 1 。

在複合寫法中應該位於 slice 屬性 和 repeat 屬性中間用 / 間隔,
如:

border-image: url(border.png) 27 / 6rem / repeat;

 

屬性 說明
length 帶 px , em , in ... 單位的尺寸值。
percentage 百分比。
number 不帶單位的數字,它表示 border-width 的倍數。
auto border-image-width 將會使用 border-image-slice 的值。

 

圖片來源

運作順序如下

  1. border-image-slice 分割 border-image-source 的九宮格為 A
  2. border-image-width 分割 DIV 的九宮格為 B
  3. 再把 A 分佈進 B 裡面

如果有 border-image-width / border-image-outset 屬性值, border-image-slice 必須指定數值,否則不合語法,如:

border-image: url(box.png) 27 27 27 27 / 10px / 10px;

下方為 錯誤寫法

border-image: url(box.png) / 10px / 10px;

 


 

border-image-outset

border-image-outset 屬性規定邊框圖像超過邊框盒的量,相當於把原來的貼圖位置向外延伸,可以把 border image area 的區域延伸到 border-box 之外,但不能為負值。

 

屬性 說明
length 設置邊框圖像與邊框( border-image )的距離,默認為 0 。
number 代表對應的 border-width 的倍數。

 

在複合寫法中一定要在 border-image-width 後面,用 / 間隔,如:

border-image: url(border.png) 27 / 6rem / 1.5rem /repeat;

向外延伸 1.5rem 再貼圖,假設缺 border-image-width,仍然需要在原來 border-image-width 寫上 / ,如:

border-image: url(box.png) 27 27 27 27 / / 10px;

下方為 錯誤寫法

border-image: url(box.png) 27 27 27 27 / 10px; //這樣寫 10px 會被當作 border-width

如果有 border-image-width / border-image-outset 屬性值, border-image-slice 必須指定數值,否則不合語法,如:

border-image: url(box.png) 27 27 27 27 / 10px / 10px;

下方為 錯誤寫法

border-image: url(box.png) / 10px / 10px;

 


 

border-image-repeat

卡卡西說當忍者,最基本的分身術是一定要會的,這次光分身就會學 repeat 、 round 、 space 三個,然後緊接著還要跟丁次討教 stretch 倍化之術,你再這樣慢吞吞的會遲到啊,我們趕快整理一下要出門了!

cover

圖片來源

border-image-repeat 屬性規定圖像邊框是否應該被重複( repeat )、拉伸( stretch )或鋪滿( round 、 space )。該屬性規定如何延展和鋪排邊框圖像的邊緣和中間部分,因此,可以規定兩個值,如果省略第二個值,則採取與第一個相同的值。

 

border-image-repeat

div {
    border: 27px solid rgba(242,181,78,.3);
    border-image-source: url(img/img.png);
    border-image-slice: 34;
    border-image-repeat: 
        stretch | repeat | round | space;
}

 

屬性 說明 範例
stretch 將小圖片拉長來填滿邊框區域,圖片不循環,很顯然這樣邊框圖會變形。 stretch
repeat 邊框圖將會依次平鋪,填滿邊框區域,但有個瑕疵,就是當元素寬度或高度不是邊框圖的整數倍時,最後一個 / 第一個圖片不能完成顯示,會被遮擋一部分。 repeat
round 重複方式填滿,當無法以整數的倍數填滿時,就會依照整數倍數來縮放圖片並填滿。 round
space 重複填滿,用整數倍數填滿,其它不足的部分,再縮放圖片填滿。 space

 


 

outline 屬性

屬性 說明
outline 繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。
outline-color 設置一個元素整個輪廓中可見部分的顏色。
outline-style 設置元素的整個輪廓的樣式。
outline-width 設置元素整個輪廓的寬度,只有當輪廓樣式不是 none 時,這個寬度才會起作用。
outline-offset 對輪廓進行偏移,並在邊框邊緣進行繪製( 允許為負數 )。
box-decoration-break 可以指定元素片段在跨行、跨列或跨頁( 如打印 )時候的樣式渲染表現,但只能影響部分 CSS 的渲染。
box-shadow 向框添加一個或多個陰影。

 


 

outline

outline ( 輪廓 )是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。 outline 不會佔據空間,也不一定是矩形。

border 可應用於幾乎所有有形的 html 元素,而 outline 是針對鏈接、表單控件和 ImageMap 等元素設計,從而另一個區別也可以推理出,那就是: outline 的效果將隨元素的 focus 而自動出現,相應的由 blur 而自動消失,這些都是瀏覽器的默認行為,無需 JavaScript 配合 CSS 來控制,而 border 可以自行定義四邊的邊框,但 outline 不支持 單獨為某一方向設置輪廓線,例如:

outline-left: 10px solid #339;

 

屬性 說明
outline-color 設置一個元素整個輪廓中可見部分的顏色。
outline-style 設置元素的整個輪廓的樣式。
outline-width 設置元素整個輪廓的寬度,只有當輪廓樣式不是 none 時,這個寬度才會起作用。

 

簡寫沒有包含 outline-offset 屬性。

outline 簡寫屬性可以按順序設置如下屬性:

  1. outline-color
    設置元素輪廓的顏色,其取值與 border-color 類似,只有當 outline-style 不為 none 時才有效,默認為 transparent 。
  2. outline-style
    設置元素輪廓的格式,其取值與 border-style 類似,但沒有 hidden 值,默認為 none ,無輪廓。
  3. outline-width
    設置元素輪廓的寬度,其取值與 border-width 類似,只有當 outline-style 不為 none 時才有效。

 


 

outline-color

outline-color 屬性設置一個元素整個輪廓中可見部分的顏色,輪廓的樣式不能是 none ,否則輪廓不會出現,且必須聲明 outline-style 屬性,元素只有獲得輪廓以後才能改變其輪廓的顏色。

屬性 說明
color_name 規定顏色值為顏色名稱的輪廓顏色( 比如 red )。
hex_number 規定顏色值為十六進制值的輪廓顏色( 比如 #ff0000 )。
rgb_number 規定顏色值為 rgb 代碼的輪廓顏色( 比如 rgb(255,0,0) )。
invert 默認,執行顏色反轉( 逆向的顏色 )。可使輪廓在不同的背景顏色中都是可見。

 


 

outline-style

outline-style 屬性用於設置元素的整個輪廓的樣式,樣式不能是 none ,否則輪廓不會出現。

div {
    outline-width: 5px;
    outline-color: #555;
    outline-style: 
        none | hidden | dotted | dashed | solid |
        double | groove | ridge | inset | outset;
}

 

屬性 說明 範例
none 定義無輪廓。
hidden 隱藏輪廓,基本上效果跟 none 一樣。
dotted 定義點狀的輪廓。
dashed 定義虛線輪廓。
solid 定義實線輪廓。
double 定義雙線輪廓,雙線的寬度等同於 outline-width 的值。
groove 定義 3D 凹槽輪廓。
ridge 定義 3D 凸槽輪廓。
inset 定義 3D 凹邊輪廓。
outset 定義 3D 凸邊輪廓。

( 上表圖片來源皆截至 Chrome 瀏覽器 )

 


 

outline-width

outline-width 屬性設置元素整個輪廓的寬度,只有當輪廓樣式不是 none 時,這個寬度才會起作用,如果樣式為 none ,寬度實際上會重置為 0 ,不允許設置負長度值。

屬性 說明
thin 規定細輪廓。
medium 默認,規定中等的輪廓。
thick 規定粗的輪廓。
length 允許規定輪廓粗細的值。

 


 

outline-offset

outline-offset 屬性對輪廓進行偏移,並在邊框邊緣進行繪製( 允許為負數 )。
若你只需要兩層邊框,那可以先設置一層常規邊框再加上一層 outline ,不同於 box-shadow ,此方案可以製作出虛線邊框。

background: yellowgreen;
outline: 5px dotted deeppink;
outline-offset: -15px;

需要注意的地方

  1. 只適用於雙層邊框的場景
  2. 邊框不一定會貼合 border-radius 屬性產生的圓角,因此如果元素是圓角的,它的描邊可能還是直角的,但 box-shadow 卻是會的,如果我們把這兩者疊加到一起, box-shadow 會剛好填補描邊和容器圓角之間的空隙。
background: yellowgreen;
outline: 10px solid deeppink;
border-radius: 20px;
box-shadow: 0 0 0 10px #333; /*填補圓角*/

 


 

box-decoration-break

CSS 界的海星,屬於能自體再生的動物,如果其中一隻觸手被切斷,改個原始碼,過一段時間便能長回來,不信你去問問派大星。

cover

圖片來源

box-decoration-break 屬性可以指定元素片段在跨行、跨列或跨頁( 如打印 )時候的樣式渲染表現,但只能影響部分 CSS 的渲染,如下:

  • background
  • border
  • border-image
  • box-shadow
  • border-radius
  • clip-path
  • margin
  • padding

IE 不支持, Firefox 全數支持, Opera 、 Safari 和 Chrome 支持替代的 -webkit-box-decoration-break 規則。

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

使用 box-decoration-break 來處理元素片段樣式時,該元素必須是 inline 元素( 或者 display:inline 的其它元素 ),而且該元素不能使用取值為其它值的 display ( 比如 block 、 inline-block 、 flex 等),也不能運用於 float 和 position ( 取值為 absolute 和 fixed )。

HTML

<div class="box">
    <span class="text">文字</span>
</div>

CSS

.box { width: 200px; color: #fff; }
.text {
    border-radius: 30px;
    background-color: chocolate;
    -webkit-box-decoration-break: slice | clone;
    box-decoration-break: slice | clone;
 }

 

屬性 說明 範例
slice 默認值。表示各個盒子斷開的部分如同切割開一般。
圖片來源
slice
( 可以看到換行的位置是直直切割,圓角在最開始和最後面 )
clone 表示斷開的各個盒子樣式獨自渲染。
圖片來源
clone
( 可以看到斷開的兩個內聯盒子兩端都是圓角 )

 

毛筆刷效果

毛筆刷效果

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

 

螢光筆效果

螢光筆效果

p {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}

 


 

box-shadow

「如果你從未體驗任何事情的黑暗面,那麼你的所在之地,鐵定沒有任何光芒。」—— Lady Gaga

原本想傳遞一點正能量,但後來覺得太像傳教了哈哈哈,在網頁設計上,適時加上陰影的確跟有裂縫的人生一樣,可以透進一些光芒進來,老闆,幫我點播黃乙玲的人生的歌,好搭配接下來的課程。

cover

圖片來源

box-shadow 屬性向框添加一個或多個陰影。

box-shadow: h-shadow  v-shadow  blur  spread  color inset;

Firefox 支持替代的 -moz-box-shadow 規則, Safari 和 Chrome 支持替代的 -webkit-box-shadow 規則。

div{
    -moz-box-shadow: 2px 2px 5px #000;
    -webkit-box-shadow: 2px 2px 5px #000;
    box-shadow: 2px 2px 5px #000;
}

box-shadow

 

屬性 說明
h-shadow 必須,水平陰影的位置。允許負值。
v-shadow 必須,垂直陰影的位置。允許負值。
blur 選填,模糊距離。
spread 選填,陰影的尺寸。
color 選填,陰影的顏色。
inset 選填,將外部陰影( outset )改為內部陰影。

 

內陰影

內陰影

box-shadow: 2px 2px 5px #000 inset;

 

陰影擴展

陰影擴展

box-shadow: 0px 0px 5px 10px #000; /* 第四值是陰影擴展長度值 */

 

多重陰影

多重陰影

box-shadow: 
    0px 0px 0px 3px #bb0a0a,
    0px 0px 0px 6px #2e56bf,
    0px 0px 0px 9px #ea982e; /* 用逗點分開即可實現多重陰影 */

 

單側投影

如果陰影的模糊半徑,與負的擴張半徑一致( 如下述原始碼的 5px 和 -5px ),那麼我們將看不到任何陰影,因為生成的陰影將被包含在原來的元素之下,除非給它設定一個方向的偏移量,所以這個時候,我們定一個方向的偏移值,即可實現單側投影。

單側投影

box-shadow: -7px 0 5px -5px #333;

 

使用偽元素 ::before 和 ::after ,能創造出非常逼真的只有圖片才能實現的陰影效果。

使用偽元素

HTML

<div class="box11 shadow"></div>

CSS

.box11 {
    width: 300px;
    height: 100px;
    background: #ccc;
    border-radius: 10px;
    margin: 10px;
}
.shadow {
    position: relative;
    max-width: 270px;
    box-shadow:
        0px 1px 4px rgba(0,0,0,0.3),
        0px 0px 20px rgba(0,0,0,0.1) inset;
}
.shadow::before ,
.shadow::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    transform: rotate(-3deg);
}
.shadow::after{
    right: 10px;
    left: auto;
    transform: rotate(3deg);
}

 

不同顏色的陰影,指定交錯的位移,也能呈現特別的視覺。陰影跨越到下方的元素也不會移動排版。

div {
    background-color: #eee;
    box-shadow:
        8px 24px 2px rgba(100%,0%,0%,0.4),
        16px -4px 2px rgba(0%,100%,0%,0.4),
        24px 12px 2px rgba(0%,0%,100%,0.4);
}

 

照片浮動效果

照片浮動效果

HTML

<div class="floating"></div>

CSS

.floating {
    width: 300px;
    height: 250px;
    background-color: #f9c919;
    position: relative;
    transform: translateY(0);
    transition: transform 1s;
}
.floating:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -30px;
    left: 50%;
    height: 8px;
    width: 100%;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    transform: translate(-50%, 0);
    transition: transform 1s;
}
.floating:hover {
    transform: translateY(-40px);
    transition: transform 1s;
}
.floating:hover:after {
    transform: translate(-50%, 40px) scale(0.75);
    transition: transform 1s;
}

 

撕便利貼的立體效果

撕便利貼的立體效果

div {
    position: relative;
    width: 600px;
    height: 100px;
    background: hsl(48, 100%, 50%);
    border-radius: 20px;
}
div::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    bottom: 0;
    border-radius: 10px;
    background: hsl(48, 100%, 20%);
    transform: translate(0, -15%) rotate(-4deg);
    transform-origin: center center;
    box-shadow: 0 0 14px 15px hsl(48, 100%, 20%);
    display: block;
    z-index: -2;
}

 


 

參考資料

  1. CSS border 属性
  2. CSS3 border-radius 属性
  3. CSS3 border-image 属性
  4. 10个demo示例学会CSS3 radial-gradient径向渐变
  5. CSS3 中border-image詳解
  6. CSS3 border-image-slice 属性
  7. border-image 的正确用法
  8. 关于css3的边框的border-radius和border-image用法的详解
  9. CSS3 border-image-outset 属性
  10. CSS3 border-image 彻底明白
  11. CSS屬性總結(一):background, border, outline
  12. CSS outline-color 属性
  13. CSS outline-width 属性
  14. CSS/CSS3 box-decoration-break属性简介
  15. CSS 揭秘( Lea Verou 著/ CSS 魔法 譯 )
  16. CSS3 box-shadow 属性
  17. CSS阴影效果(Box-shadow)用法趣味讲解
  18. 超讚的 CSS 陰影技巧與細節
  19. box-shadow 两种高大上用法!
  20. CSS box-shadow 產生陰影效果或光暈效果的特性
  21. 有趣的 box-decoration-break
  22. Border & outline- 金魚都能懂的CSS必學屬性

#css #css保健室 #border #border-color #border-style #border-width #border-radius #border-image #border-image-source #border-image-slice #border-image-width #border-image-outset #border-image-repeat #outline #outline-color #outline-style #outline-width #outline-offset #box-decoration-break #box-shadow







Related Posts

MTR04_0714

MTR04_0714

ASP.NET Core Web API 入門教學 - 開發環境基本介紹

ASP.NET Core Web API 入門教學 - 開發環境基本介紹

N4.1_Webpack 是什麼及為什麼要用它?

N4.1_Webpack 是什麼及為什麼要用它?


Comments