CSS - 常用筆記

發表於 | 分類於 | 0 comments

背景圖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 圖片滿版 */
.img-cover {
    background-image: url(./bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* 圖片居中 */
.img-contain {
    background-image: url(./bg.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

其他背景圖範例：固定、滿版、置中
background-attachment是背景固定模式的屬性
註：作为背景的圖片是撑不起元素的，須額外需要给div新增「寬、高」

圓角

1
2
3
4
5
6
div.circle{
    width:80px;
    height:80px;
    border-radius:50%;
    background-color:blue;
}
  • 2個重點：
    • 圓的直徑，長寬 一定要等長
    • border-radius:50%

參考網址： 圓角詳解、CSS3技巧之形狀

區塊陰影、文字立體感

1
2
3
4
5
6
7
8
/* 外層的陰影 */
box-shadow: 1px 1px 5px rgba(0,0,0,0.3);

/* 內層的陰影(多加 inset) */
box-shadow: inset 1px 1px 5px rgba(0,0,0,0.3);

/* 文字的陰影 */
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);

參考網址： 玩转box-shadow、文字立體感

a 連結

取消 a 連結下底線

1
2
3
a {
 text-decoration: none;
}

:hover 移至 a 連結的效果

1
2
3
a:hover {
 border-bottom: 3px solid #00cc99;
}

註：a 連結 預設display為inline，但為了讓 User有更好的操作體驗，
會變更成 block，增加「寬、高」範圍，讓 User較易點擊到目標連結。

斷點

1
2
3
4
5
6
@media (max-width: 768px) {
 //iPad
}
@media (max-width: 767px) {
 //iPhone
}

新單位：高度vh、寬度vw

vh 代表的是view height，也就是螢幕可視範圍高度的百分比；
vw 表示的是view width，也就是螢幕可是範圍寬度的百分比。

ul ol list-style

取消樣式

ol,ul {list-style: none;}

設定樣式

list-style: circle;

其他樣式參考：CSS list-style

指定滑鼠游標的型態

cursor: pointer; /*手型，表示超連結*/

參考網址： 游標的型態