標籤彙整:CSS3

筆記線效果

技巧

  1. linear-gradient
  2. 漸層中,後色%小於前色%形成色塊
  3. background-size
<div>
line1<br>
line2<br>
line3<br>
line4<br>
</div>
div {
  background: linear-gradient(rgba(238, 238, 238, 0.35) 95%, rgba(43, 139, 165, 0.15) 5%);
  //size決定重複的漸層色塊大小
  background-size: 100% 19px;
  border-radius: 3px 3px 3px 3px;
  font-size: 14px;
  border: 1px solid #90a955; 
}

Display

line1
line2
line3
line4

CSS3選擇器 :nth-child

目的

當HTML有多個重複元素時(例如表格),可以用:nth-child指定要改的元素,避免大量撰寫class的麻煩

範例

.box click it
 .dot
 .dot
 .dot
 .dot
 .dot
 .dot
 .dot
.box
.box
  width: 200px
  height: 100px
  border: 1px solid #000
  display: flex
  justify-content: space-around
  align-items: center
  &:hover
    & .dot
    opacity: 1

.dot
  width: 10px
  height: 10px
  border-radius: 100%
  background-color: #90a955
  opacity: 0
  transition-duration: 0.5s

  &:nth-child(1)
    transition-delay: 0.2s
  &:nth-child(2)
    transition-delay: 0.4s
  &:nth-child(3)
    transition-delay: 0.6s
  &:nth-child(4)
    transition-delay: 0.8s
  &:nth-child(5)
    transition-delay: 1s
  &:nth-child(6)
    transition-delay: 1.2s
  &:nth-child(7)
    transition-delay: 1.4s
Display

click it