box-shadow

參數設定

box-shadow: X偏移px Y偏移px 模糊的程度px 外擴或内縮px 指定顏色rgba;

範例

<div>這是陰影框</div>
div{
border: solid 1px;
width: 350px; height: 200px;
background-color: #243010;
color: white;
text-align: center;
line-height: 200px;
box-shadow: 10px 10px 20px -5px rgba(0,51,0,0.5);
}

Display

這是陰影框

OVERFLOW應用

産生卷軸

原理:超出元素範圍内的東西,用卷軸方式呈現

<div class="card">
 <div class="circle"></div>
 <div class="square"></div>
</div>
.card{
width: 350px; height: 200px;
background-color: #EEF5DB;
position: relative;
overflow: scroll;
}

.circle{
 width: 50px; height: 50px;
 border: solid 3px #4F6367;
 border-radius: 100%;
 position: absolute;
 right: -20px;
 top: -20px;
}

.square{
 width: 70px; height: 70px;
 background-color: #4F6367;
 position: absolute;
 top: 180px;
 right: 30px;
}

Display

.
.

隱藏框外的東西

原理:超出元素範圍内的東西,給隱藏掉

<div class="card">
 <div class="circle"></div>
 <div class="square"></div>
</div>
.card{
width: 350px; height: 200px;
background-color: #EEF5DB;
position: relative;
overflow: hidden;
}

.circle{
 width: 50px; height: 50px;
 border: solid 3px #4F6367;
 border-radius: 100%;
 position: absolute;
 right: -20px;
 top: -20px;
}

.square{
 width: 70px; height: 70px;
 background-color: #4F6367;
 position: absolute;
 top: 180px;
 right: 30px;
}

Display

.
.

 

透明色設定

方法一

RGB色碼設定透明度,最後一碼0為完全透明,1為完全不透明

<div>透明文字</div>
div{
font-weight: 900;
color: rgba(0,0,0,0.5);
}

Display

透明文字

方法二

直接指定色票

<div>透明文字</div>
div{
font-weight: 900;
color: #666;
}

Display

透明文字

方法三

使用opacity,0為完全透明,1為完全不透明

<div>透明文字</div>
div{
opacity: 0.5;
}
透明文字

網頁整頁呈現

問題

  • html與body有預設一定大小,不是整頁呈現。
  • html與body有預設padding與margin,所以内容元素無法無縫接軌。
  • 所以網頁無法整頁呈現

將所有元素用border顯示,可以看出最外圍的兩個框框就是html與body的預設大小

full-size-min

解法

  • width, height設為100%
  • padding, margin設為0px
html,body{
 width: 100%; 
 height: 100%;
 padding: 0px; 
 margin: 0px;
}

成果

現在外圍的預設框線(表示網頁的邊界)都不見了!
網頁能夠整頁顯示了

full-size-2-min

div與span

DIV tag

  • 用來分隔的標籤,幾乎沒有任何預設樣式
  • 預設:display: block
<p>這是一段内文,我想要用分隔標籤特化<div>這段文字</div>並且利用div標籤。</p>
div{
font-style: italic;
}

Display
這是一段内文,我想要用分隔標籤特化

這段文字
並且利用div標籤。

SPAN tag

  • 用來分隔的標籤,幾乎沒有任何預設樣式
  • 預設:display: inline
  • 適合内文
<p>這是一段内文,我想要用分隔標籤特化<span>這段文字</span>並且利用span標籤。 </p>
div{
 font-style: italic;
}

Display
這是一段内文,我想要用分隔標籤特化這段文字並且利用span標籤。

Position

Static

    • 預設
    • 無法改動上下左右位置
    • 也無法針對内部元素做定位(進階)
    • 會隨滾輪跑走
<div class="static">static</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.static{
 position: static;
 right: 10px;
}

Display

static

.

 

Relative

  • 相對於static偏移
  • 能夠改動上下左右位置,但是以static基準移動
  • 會隨滾輪跑走
<div class="relative">relative</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.relative{
 position: relative;
 left: 10px;
}

Display

relative

.

Absolute

  • 針對上層框架(通常是body)做定位
  • 可以移動上下左右位置
  • 會隨滾輪跑走
<div class="absolute">absolute</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.absolute{
 position: absolute;
 left: 10px;
}

Display

absolute

.

Fixed

  • 無法針對上層框架做定位,只能針對body定位
  • 可以移動上下左右位置
  • 不隨滾輪跑走
<div class="fixed">fixed</div>
div{
 border: solid 1px black;
 width: 300px;
 height: 100px;
}

.fixed{
 position: fixed;
 //fixed要記得設定left/top/right/bottom
 //否則會消失
 left: 10px;
}

Display
can’t be showed up

備註

當單元素position改變時,不影響其他元素定位。
若需要其他元素自動改變定位,則使用margin, padding為佳。

CodePen Example

Ian's Blog