Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Change History

Message: [講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探

Changed By: JinJin
Change Date: April 16, 2015 11:49AM

[講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探
<h2>範例說明</h2>
http://mepopedia.com/~jinjin/web/hw05a
http://mepopedia.com/~jinjin/web/hw05a/link.html

本範例延續上個範例
http://mepopedia.com/forum/read.php?804,44612
http://mepopedia.com/forum/read.php?804,43670

新增外部連結頁面,並且嘗試CSS3的設定

請延續上個主題的內容,將之完成,作為期中作業

[hr]
<h2>上課影音</h2>
4/8上課影音
<b>CSS3圓角做法</b>
http://youtu.be/_Z_QPEDPiRg
<iframe width="853" height="480" src="//www.youtube.com/embed/_Z_QPEDPiRg?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>CSS3漸層與陰影</b>
http://youtu.be/i0NtLm4Ukyg
<iframe width="853" height="480" src="//www.youtube.com/embed/i0NtLm4Ukyg?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>LINKS頁面設定</b>
http://youtu.be/ftl3wyXcB5U
<iframe width="853" height="480" src="//www.youtube.com/embed/ftl3wyXcB5U?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>內頁實作篇-連結頁面</h2>
僅供參考,內容及設定請自行修改
<b>新增之HTML部分</b>
http://mepopedia.com/~jinjin/web/hw05a/hw05-html.txt

<b>新增之CSS部分</b>
http://mepopedia.com/~jinjin/web/hw05a/hw05-css.txt

[hr]
<h2>CSS3語法初探</h2>

參考講義:
<b>[CSS3/IE filter] 漸層背景 Gradient Background</b>
http://mepopedia.com/forum/read.php?844,17157

CSS3實作即時語法請參考
http://www.css3maker.com/

<h3>邊框圓角語法</h3>
可自行調整數值

四邊圓角皆一致
<xmp>-moz-border-radius: 10px;
-webkit-border-radius:10px;
border-radius: 10px;</xmp>

只有下方圓角
<xmp>
border-radius: 0 0 10px 10px;</xmp>


[hr]
<h3>漸層語法</h3>
radial為放射式漸層
linear為線性漸層
可自行調整數值,但須注意整體畫面質感
<xmp>background:-webkit-gradient(linear, 50% 100%, 50% 0%, from(#797255), to(#D7D3C6))</xmp>

[hr]
<h3>邊框陰影語法</h3>
請自行調整數值
請注意,勿誇張
<xmp>-moz-box-shadow: 1px 0px 7px #333333;
-webkit-box-shadow: 1px 0px 7px #333333;
box-shadow: 1px 0px 7px #333333;</xmp>

[hr]
<h3>文字陰影語法</h3>
請自行調整數值
請注意,勿誇張
<xmp>text-shadow:1px 2px 1px #000000;</xmp>

[hr]
<h3>透明背景語法</h3>
<h4>內部所有物件皆透明opacity</h4>
透明度80%
<xmp>opacity: 0.80;</xmp>


<h4> 僅背景透明 rgba 及 hsla </h4>
rgba 及 hsla 為 CSS level 3 (CSS 3) 起,新一代表示色彩的單位 (color units),最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值;顏色的指定,當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等

rgb值
可以是0~255的整數值,與一般 位元顏色的十進位值相同,惟這類表示法不接受十六進位值(如ff,8c);也可以是0%~100%的百分比值。所以例如,rgb(128,128,128)=rgb(50%,50%,50%)=#808080 。

alpha 值 (alphavalue)
0.0 ~ 1.0 允許小數一位的數值, 0 →完全透明, 1 →完全不透明, 0.7 → 70% 不透明。
→完全不透明, 0.7 → 70% 不透明。
(opacity=80);</xmp>


<h4> 僅背景透明 rgba 及 hsla </h4>
rgba 及 hsla 為 CSS level 3 (CSS 3) 起,新一代表示色彩的單位 (color units),最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值;顏色的指定,當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等

rgb值
可以是0~255的整數值,與一般 位元顏色的十進位值相同,惟這類表示法不接受十六進位值(如ff,8c);也可以是0%~100%的百分比值。所以例如,rgb(128,128,128)=rgb(50%,50%,50%)=#808080 。

alpha 值 (alphavalue)
0.0 ~ 1.0 允許小數一位的數值, 0 →完全透明, 1 →完全不透明, 0.7 → 70% 不透明。

<xmp> background: rgba(40%,0%,0%,0.4);
border-bottom: 20px solid rgba(50%,20%,30%,0.4);
border-left: 60px solid rgba(50%,20%,30%,0.4);</xmp>

*資料來源:
http://blog.xuite.net/andy19890411/Orz/37407628-【CSS】半透明效果+-+CSS3+rgba,+hsla,+filter,+-ms-filter
http://boohover.pixnet.net/blog/post/20556952-半透明與透明效果設計-css-rgba,-hsla-色彩單位-(
Changed By: JinJin
Change Date: April 15, 2015 11:04PM

[講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探
<h2>範例說明</h2>
http://mepopedia.com/~jinjin/web/hw05a
http://mepopedia.com/~jinjin/web/hw05a/link.html

本範例延續上個範例
http://mepopedia.com/forum/read.php?804,44612
http://mepopedia.com/forum/read.php?804,43670

新增外部連結頁面,並且嘗試CSS3的設定

請延續上個主題的內容,將之完成,作為期中作業

[hr]
<h2>上課影音</h2>
4/8上課影音
<b>CSS3圓角做法</b>
http://youtu.be/_Z_QPEDPiRg
<iframe width="853" height="480" src="//www.youtube.com/embed/_Z_QPEDPiRg?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>CSS3漸層與陰影</b>
http://youtu.be/i0NtLm4Ukyg
<iframe width="853" height="480" src="//www.youtube.com/embed/i0NtLm4Ukyg?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>LINKS頁面設定</b>
http://youtu.be/ftl3wyXcB5U
<iframe width="853" height="480" src="//www.youtube.com/embed/ftl3wyXcB5U?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>內頁實作篇-連結頁面</h2>
僅供參考,內容及設定請自行修改
<b>新增之HTML部分</b>
http://mepopedia.com/~jinjin/web/hw05a/hw05-html.txt

<b>新增之CSS部分</b>
http://mepopedia.com/~jinjin/web/hw05a/hw05-css.txt

[hr]
<h2>CSS3語法初探</h2>

參考講義:
<b>[CSS3/IE filter] 漸層背景 Gradient Background</b>
http://mepopedia.com/forum/read.php?844,17157

CSS3實作即時語法請參考
http://www.css3maker.com/

<h3>邊框圓角語法</h3>
可自行調整數值

四邊圓角皆一致
<xmp>-moz-border-radius: 10px;
-webkit-border-radius:10px;
border-radius: 10px;</xmp>

只有下方圓角
<xmp>
border-radius: 0 0 10px 10px;</xmp>


[hr]
<h3>漸層語法</h3>
radial為放射式漸層
linear為線性漸層
可自行調整數值,但須注意整體畫面質感
<xmp>background:-webkit-gradient(linear, 50% 100%, 50% 0%, from(#797255), to(#D7D3C6))</xmp>

[hr]
<h3>邊框陰影語法</h3>
請自行調整數值
請注意,勿誇張
<xmp>-moz-box-shadow: 1px 0px 7px #333333;
-webkit-box-shadow: 1px 0px 7px #333333;
box-shadow: 1px 0px 7px #333333;</xmp>

[hr]
<h3>文字陰影語法</h3>
請自行調整數值
請注意,勿誇張
<xmp>text-shadow:1px 2px 1px #000000;</xmp>

[hr]
<h3>透明背景語法</h3>
<h4>內部所有物件皆透明opacity</h4>
透明度80%
<xmp>opacity: 0.80;</xmp>


<h4> rgba 及 hsla </h4>

rgba 及 hsla 為 CSS level 3 (CSS 3) 起,新一代表示色彩的單位 (color units),最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值;顏色的指定,當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等

alpha 值 (alphavalue)
0.0 ~ 1.0 允許小數一位的數值, 0 →完全透明, 1 →完全不透明, 0.7 → 70% 不透明。

<xmp> background: rgba(40%,0%,0%,0.4);
border-bottom: 20px solid rgba(50%,20%,30%,0.4);
-bottom: 20px solid rgba(50%,20%,30%,0.4);
gba 及 hsla 為 CSS level 3 (CSS 3) 起,新一代表示色彩的單位 (color units),最大的進展就是增加了「a」og.xuite.net/andy19890411/Orz/37407628-【CSS】半透明效果+-+CSS3+rgba,+hsla,+filter,+-ms-filter
色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等

rgb值
可以是0~255的整數值,與一般 位元顏色的十進位值相同,惟這類表示法不接受十六進位值(如ff,8c);也可以是0%~100%的百分比值。所以例如,rgb(128,128,128)=rgb(50%,50%,50%)=#808080 。

alpha 值 (alphavalue)
0.0 ~ 1.0 允許小數一位的數值, 0 →完全透明, 1 →完全不透明, 0.7 → 70% 不透明。
(opacity=80);</xmp>


<h4> 僅背景透明 rgba 及 hsla </h4>
rgba 及 hsla 為 CSS level 3 (CSS 3) 起,新一代表示色彩的單位 (color units),最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值;顏色的指定,當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等

rgb值
可以是0~255的整數值,與一般 位元顏色的十進位值相同,惟這類表示法不接受十六進位值(如ff,8c);也可以是0%~100%的百分比值。所以例如,rgb(128,128,128)=rgb(50%,50%,50%)=#808080 。

alpha 值 (alphavalue)
0.0 ~ 1.0 允許小數一位的數值, 0 →完全透明, 1 →完全不透明, 0.7 → 70% 不透明。

<xmp> background: rgba(40%,0%,0%,0.4);
border-bottom: 20px solid rgba(50%,20%,30%,0.4);
border-left: 60px solid rgba(50%,20%,30%,0.4);</xmp>

*資料來源:
http://blog.xuite.net/andy19890411/Orz/37407628-【CSS】半透明效果+-+CSS3+rgba,+hsla,+filter,+-ms-filter
http://boohover.pixnet.net/blog/post/20556952-半透明與透明效果設計-css-rgba,-hsla-色彩單位-(
Changed By: JinJin
Change Date: April 15, 2015 10:58PM

[講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探
<h2>範例說明</h2>
http://mepopedia.com/~jinjin/web/hw05a
http://mepopedia.com/~jinjin/web/hw05a/link.html

本範例延續上個範例
http://mepopedia.com/forum/read.php?804,44612
http://mepopedia.com/forum/read.php?804,43670

新增外部連結頁面,並且嘗試CSS3的設定

請延續上個主題的內容,將之完成,作為期中作業

[hr]
<h2>上課影音</h2>
4/8上課影音
<b>CSS3圓角做法</b>
http://youtu.be/_Z_QPEDPiRg
<iframe width="853" height="480" src="//www.youtube.com/embed/_Z_QPEDPiRg?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>CSS3漸層與陰影</b>
http://youtu.be/i0NtLm4Ukyg
<iframe width="853" height="480" src="//www.youtube.com/embed/i0NtLm4Ukyg?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<b>LINKS頁面設定</b>
http://youtu.be/ftl3wyXcB5U
<iframe width="853" height="480" src="//www.youtube.com/embed/ftl3wyXcB5U?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]
<h2>內頁實作篇-連結頁面</h2>
僅供參考,內容及設定請自行修改
<b>新增之HTML部分</b>
http://mepopedia.com/~jinjin/web/hw05a/hw05-html.txt

<b>新增之CSS部分</b>
http://mepopedia.com/~jinjin/web/hw05a/hw05-css.txt

[hr]
<h2>CSS3語法初探</h2>

參考講義:
<b>[CSS3/IE filter] 漸層背景 Gradient Background</b>
http://mepopedia.com/forum/read.php?844,17157

CSS3實作即時語法請參考
http://www.css3maker.com/

<h3>邊框圓角語法</h3>
可自行調整數值

四邊圓角皆一致
<xmp>-moz-border-radius: 10px;
-webkit-border-radius:10px;
border-radius: 10px;</xmp>

只有下方圓角
<xmp>
border-radius: 0 0 10px 10px;</xmp>


[hr]
<h3>漸層語法</h3>
radial為放射式漸層
linear為線性漸層
可自行調整數值,但須注意整體畫面質感
<xmp>background:-webkit-gradient(linear, 50% 100%, 50% 0%, from(#797255), to(#D7D3C6))</xmp>

[hr]
<h3>邊框陰影語法</h3>
請自行調整數值
請注意,勿誇張
<xmp>-moz-box-shadow: 1px 0px 7px #333333;
-webkit-box-shadow: 1px 0px 7px #333333;
box-shadow: 1px 0px 7px #333333;</xmp>

[hr]
<h3>文字陰影語法</h3>
請自行調整數值
請注意,勿誇張
<xmp>text-shadow:1px 2px 1px #000000;</xmp>

[hr]
<h3>透明背景語法</h3>
<h4>內部所有物件皆透明</h4>
透明度80%
<xmp>opacity: 0.80;<xmp>



rgba 及 hsla 為 CSS level 3 (CSS 3) 起,新一代表示色彩的單位 (color units),最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值;顏色的指定,當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等

alpha 值 (alphavalue)
0.0 ~ 1.0 允許小數一位的數值, 0 →完全透明, 1 →完全不透明, 0.7 → 70% 不透明。

<xmp> background: rgba(40%,0%,0%,0.4);
border-bottom: 20px solid rgba(50%,20%,30%,0.4);
;
4>內部所有物件皆透明opacity</h4>
透明度80%
<xmp>opacity: 0.80;</xmp>


<h4> rgba 及 hsla </h4>

rgba 及 hsla 為 CSS level 3 (CSS 3) 起,新一代表示色彩的單位 (color units),最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值;顏色的指定,當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等

alpha 值 (alphavalue)
0.0 ~ 1.0 允許小數一位的數值, 0 →完全透明, 1 →完全不透明, 0.7 → 70% 不透明。

<xmp> background: rgba(40%,0%,0%,0.4);
border-bottom: 20px solid rgba(50%,20%,30%,0.4);
gba 及 hsla 為 CSS level 3 (CSS 3) 起,新一代表示色彩的單位 (color units),最大的進展就是增加了「a」色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等

rgb值
可以是0~255的整數值,與一般 位元顏色的十進位值相同,惟這類表示法不接受十六進位值(如ff,8c);也可以是0%~100%的百分比值。所以例如,rgb(128,128,128)=rgb(50%,50%,50%)=#808080 。

alpha 值 (alphavalue)
0.0 ~ 1.0 允許小數一位的數值, 0 →完全透明, 1 →完全不透明, 0.7 → 70% 不透明。
(opacity=80);</xmp>


<h4> 僅背景透明 rgba 及 hsla </h4>
rgba 及 hsla 為 CSS level 3 (CSS 3) 起,新一代表示色彩的單位 (color units),最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值;顏色的指定,當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等

rgb值
可以是0~255的整數值,與一般 位元顏色的十進位值相同,惟這類表示法不接受十六進位值(如ff,8c);也可以是0%~100%的百分比值。所以例如,rgb(128,128,128)=rgb(50%,50%,50%)=#808080 。

alpha 值 (alphavalue)
0.0 ~ 1.0 允許小數一位的數值, 0 →完全透明, 1 →完全不透明, 0.7 → 70% 不透明。

<xmp> background: rgba(40%,0%,0%,0.4);
border-bottom: 20px solid rgba(50%,20%,30%,0.4);
border-left: 60px solid rgba(50%,20%,30%,0.4);</xmp>

*資料來源:
http://blog.xuite.net/andy19890411/Orz/37407628-【CSS】半透明效果+-+CSS3+rgba,+hsla,+filter,+-ms-filter
http://boohover.pixnet.net/blog/post/20556952-半透明與透明效果設計-css-rgba,-hsla-色彩單位-(
Changed By: JinJin
Change Date: April 15, 2015 10:56PM

[講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探
Changed By: JinJin
Change Date: April 10, 2014 11:09AM

[講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探
Changed By: JinJin
Change Date: April 08, 2014 09:21AM

[講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探
Changed By: JinJin
Change Date: April 08, 2014 09:20AM

[講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探
Changed By: JinJin
Change Date: April 07, 2014 11:58PM

[講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探

Original Message

作者: JinJin
Date: April 07, 2014 11:57PM

[講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探

範例說明


http://mepopedia.com/~jinjin/web/hw05a
http://mepopedia.com/~jinjin/web/hw05a/link.html

本範例延續上個範例
http://mepopedia.com/forum/read.php?804,44612
http://mepopedia.com/forum/read.php?804,43670

新增外部連結頁面,並且嘗試CSS3的設定

請延續上個主題的內容,將之完成,作為其中作業
請延續上個主題的內容,將之完成,作為期中作業

內頁實作篇-連結頁面


僅供參考,內容及設定請自行修改
新增之HTML部分
http://mepopedia.com/~jinjin/web/hw05a/hw05-html.txt

新增之CSS部分
http://mepopedia.com/~jinjin/web/hw05a/hw05-css.txt

[hr]

CSS3語法初探



請參考

範例說明


http://mepopedia.com/~jinjin/web/hw05a
http://mepopedia.com/~jinjin/web/hw05a/link.html

本範例延續上個範例
http://mepopedia.com/forum/read.php?804,44612
http://mepopedia.com/forum/read.php?804,43670

新增外部連結頁面,並且嘗試CSS3的設定

請延續上個主題的內容,將之完成,作為期中作業

rame width="853" height="480" src="//www.youtube.com/embed/ftl3wyXcB5U?rel=0" frameborder="0" allowfullscreen>

[hr]

內頁實作篇-連結頁面


僅供參考,內容及設定請自行修改
新增之HTML部分
http://mepopedia.com/~jinji[CSS3/IE filter] 漸層背景 Gradient Background
n/web/hw05a/hw05-html.txt

新增之CSS部
text-shadow: -1px -1px 1px rgba(255,255,255,0.2), 1px 1px 1px rgba(0,0,0,0.6);感
background:-webkit-gradient(linear, 50% 100%, 50% 0%, from(#797255), to(#D7D3C6))

-moz-border-radius: 10px;<br /> -webkit-border-radius:10px;<br /> border-radius: 10px;

只有下方圓角
<br /> border-radius: 0 0 10px 10px;


[hr]

漸層語法


radial為放射式漸層
linear為線性漸層
可自行調整數值,但須注意整體畫面質感
background:-webkit-gradient(linear, 50% 100%, 50olor) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等<br /> <br /> alpha 值 (alphavalue)<br /> 0.0 ~ 1.0 允許小數一位的數值, 0 →完全透明, 1 →完全不透明, 0.7 → 70% 不透明。<br /> <br /> <xmp> background: rgba(40%,0%,0%,0.4);<br /> border-bottom: 20px solid rgba(50%,20%,30%,0.4);<br /> 4>內部所有物件皆透明opacity</h4><br /> 透明度80%<br /> <xmp>opacity: 0.80;


rgba 及 hsla



rgba 及 hsla 為 CSS level 3 (CSS 3) 起,新一代表示色彩的單位 (color units),最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值;顏色的指定,當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等

alpha 值 (alphavalue)
0.0 ~ 1.0 允許小數一位的數值, 0 →完全透明, 1 →完全不透明, 0.7 → 70% 不透明。

background: rgba(40%,0%,0%,0.4);<br /> border-bottom: 20px solid rgba(50%,20%,30%,0.4);<br /> gba 及 hsla 為 CSS level 3 (CSS 3) 起,新一代表示色彩的單位 (color units),最大的進展就是增加了「a」色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等<br /> <br /> rgb值<br /> 可以是0~255的整數值,與一般 位元顏色的十進位值相同,惟這類表示法不接受十六進位值(如ff,8c);也可以是0%~100%的百分比值。所以例如,rgb(128,128,128)=rgb(50%,50%,50%)=#808080 。<br /> <br /> alpha 值 (alphavalue)<br /> 0.0 ~ 1.0 允許小數一位的數值, 0 →完全透明, 1 →完全不透明, 0.7 → 70% 不透明。<br /> (opacity=80);


僅背景透明 rgba 及 hsla


rgba 及 hsla 為 CSS level 3 (CSS 3) 起,新一代表示色彩的單位 (color units),最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值;顏色的指定,當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等

rgb值
可以是0~255的整數值,與一般 位元顏色的十進位值相同,惟這類表示法不接受十六進位值(如ff,8c);也可以是0%~100%的百分比值。所以例如,rgb(128,128,128)=rgb(50%,50%,50%)=#808080 。

alpha 值 (alphavalue)
0.0 ~ 1.0 允許小數一位的數值, 0 →完全透明, 1 →完全不透明, 0.7 → 70% 不透明。

background: rgba(40%,0%,0%,0.4);<br /> border-bottom: 20px solid rgba(50%,20%,30%,0.4);<br /> border-left: 60px solid rgba(50%,20%,30%,0.4);

*資料來源:
http://blog.xuite.net/andy19890411/Orz/37407628-【CSS】半透明效果+-+CSS3+rgba,+hsla,+filter,+-ms-filter
http://boohover.pixnet.net/blog/post/20556952-半透明與透明效果設計-css-rgba,-hsla-色彩單位-(