背景：background

RGBA stands for red green blue alpha.

border 與 border-radius

border 跟 outline 不同的地方在於：

outline 不佔有空間，不會影響到元素的寬高

border-radius

就算沒有加上 border，也可以設定 border-radius
html:

    <div class="boxOne">box1</div>

css:

.boxOne {
  background-color: salmon;
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

用 border 畫三角形

html:

<div class="boxOne">box1</div>

css:

.boxOne {
  background-color: lightgreen;
  width: 30px;
  height: 30px;
  border-top: 100px solid slateblue;
  border-right: 100px solid brown;
  border-bottom: 100px solid orange;
  border-left: 100px solid pink;
}

可以看到，上下左右的 border 其實各自都是一個梯形

因此，要做出三角形的話，就把中間 .boxOne 的寬度、高度都設為 0 即可

再看是要留哪一個三角形，就把其他三個 border 的顏色設為 transparent
css:

.boxOne {
  background-color: transparent;
  width: 0px;
  height: 0px;
  border-top: 100px solid transparent;
  border-right: 100px solid brown;
  border-bottom: 100px solid transparent;
  border-left: 100px solid transparent;
}

想要調整三角形的寬高，就用其他三個 border 的寬度來調整，例如以下
css:

.boxOne {
  background-color: transparent;
  width: 0px;
  height: 0px;
  border-top: 50px solid transparent;
  border-right: 100px solid brown;
  border-bottom: 50px solid transparent;
  border-left: 100px solid transparent;
}

文字相關：word-break 與 white-space

word-break

html:

    <div class="box">
      hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
    </div>

css:

.box{
  background-color: orange;
  width: 200px;
  height: 100px;
}

文字如果沒有空格的話，字就會超出寬度

這時，就可以使用 word-break 這個屬性來決定要如何去把文字換行

.box{
  background-color: orange;
  width: 200px;
  height: 100px;
  word-break: break-all;
}

break-all 跟 break-word 有什麼差別呢？

html:

    <div class="box">
      The giraffe's chief distinguishing characteristics are its extremely long neck and legs, its horn-like ossicones, and
      its distinctive coat patterns. It is classified under the family Giraffidae, along with its closest extant relative, the
      okapi.
    </div>

css:

.box{
  background-color: orange;
  width: 200px;
  height: 100px;
}

如果是一段有空格的文字，預設就會是 word-break: break-word

break-word 會以完整的單字去換行

css:

.box{
  background-color: orange;
  width: 200px;
  height: 100px;
  word-break: break-word;
}

break-all 不會去管是否有把字切斷，就直接換行

css:
可以看到 distinguishing 這個字就因為換行而直接被切斷了

.box{
  background-color: orange;
  width: 200px;
  height: 100px;
  word-break: break-all;
}

white-space 讓字都在同一行

css:
nowrap 代表「不用包起來，字可以超出寬度沒關係」，因此，字就會都在同一行

.box{
  background-color: orange;
  width: 200px;
  height: 100px;
  white-space: nowrap;
}

overflow 與 text-overflow

overflow

overflow 針對任何東西（圖片、文字）都可以使用

• overflow: hidden 把超出的部分隱藏
  
• overflow: scroll 如果有超出的部分，就會有捲軸

text-overflow

text-overflow 是只針對文字用的

text-overflow: ellipsis

ellipsis 是「省略號」的意思

要讓 text-overflow: ellipsis 有效果，必須滿足幾個條件：

• 要設定 white-space: nowrap，讓文字先變成同一行
• 也要設定 overflow: hidden

css:
用 text-overflow: ellipsis 把超出的文字加上省略號

.box{
  background-color: orange;
  width: 200px;
  height: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

transform 的妙用

範例程式碼如下
html:

<div class="box">box1</div>

css:

.box {
  background-color: orange;
  color: white;
  text-align: center;
  width: 200px;
  height: 100px;
  line-height: 100px;
  margin: 10px;
  border-radius: 30px;
}

用法一：像是在呼叫一個 function 一樣

transform: scale(2) 可以變大兩倍

css:
加上 transform: scale(2) 就會以「.box 的中心點為基準」把 .box 變大兩倍

搭配 transition 來使用，就會有很酷的動畫效果

.box {
  background-color: orange;
  color: white;
  text-align: center;
  width: 200px;
  height: 10px;
  line-height: 100px;
  margin: 100px;
  border-radius: 30px;
  transition: all 1s;
}
.box:hover {
  transform: scale(2);
}

transform: rotate(180deg) 可以旋轉 180 度

css:

.box {
  background-color: orange;
  color: white;
  text-align: center;
  width: 200px;
  height: 100px;
  line-height: 100px;
  margin: 10px;
  border-radius: 30px;
  transition: all 1s;
}
.box:hover {
  transform: rotate(180deg);
}

用法二：用 transform 做偏移

transform: translate(50px, -30px) 可以移動 x, y 的位置

會以「元素原本的位置」為基準點去做偏移
css:

.box {
  background-color: orange;
  color: white;
  text-align: center;
  width: 200px;
  height: 100px;
  line-height: 100px;
  margin: 10px;
  border-radius: 30px;
  transition: all 1s;
}
.box:hover {
  transform: translate(50px, -30px);
}

用 transform 來做偏移，跟「用 top, right ,bottom, left 來做偏移」有什麼差別呢？

差別在於：
用 transform 來做偏移，不會影響到其他元素的位置
因此，在動畫中要做偏移的話，通常都是使用 transform

transform: translate(-50%, -50%) 可以水平又垂直置中

.box 會水平又垂直置中於畫面
css:
transform: translate(-50%, -50%) 是移動「元素寬度的 -50%」和「元素高度的 -50%」

.box {
  background-color: orange;
  color: white;
  text-align: center;
  width: 200px;
  height: 100px;
  line-height: 100px;
  margin: 10px;
  border-radius: 30px;
  transition: all 1s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}