blog banner

常用CSS筆記(教學範例預備項目)

/*不用再計算padding了*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

/*圖片撐滿*/
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-size:cover;

/*透明度*/
filter: alpha(opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

/*透明度*/
background-color: rgba(0, 0, 0, 0.5);
/*陰影*/
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
box-shadow: 0 1px 5px rgba(0,0,0,0.75);
/*陰影2*/
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
/*圓角*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;

/*文章切齊*/
text-align: justify;
text-justify:inter-ideograph;

/*字體*/
font-family: 微軟正黑體, simhei, Arial;

/*文章過長隱藏*/
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;

/*觸控範圍透明 & padding 包含在寬度內*/
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/*取消橫向選軸*/
overflow-x:hidden;

/*刪除線*/
text-decoration:line-through;

/*CSS RWD判斷條件*/
@media screen and (min-width:750px) and (max-width:900px) {
}

/*分欄*/
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;

/*卷軸*/
::-webkit-scrollbar {
width:3px;
background:#fff;
}
::-webkit-scrollbar-thumb {
background:#c40000;
}
Select 拿掉箭頭的CSS語法
只要拿掉箭頭,再設定background,就可以輕易達成替換ICON樣式
select {
-webkit-appearance: none; /*Chrome*/
-moz-appearance: none; /*FF*/
appearance: none;/*CSS3*/
}

select::-ms-expand {
display: none; /*IE*/
}