css 頁面特殊顯示效果

1.移動端最小設定字型為12px，如果想要更小字型效果：

-webkit-transform:scale(0.9);

2.文字超過兩行時，末尾顯示點點的效果：

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

3.文字不換行，長度超過60px時顯示點點的效果：

width: 60px;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

-webkit-text-overflow:ellipsis;

background: url("../img/header_bg.png") no-repeat center center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

width: 100%;

height: 55px;

5.線性漸變條的相容性寫法：

background: -moz-linear-gradient(bottom, #f66e22, #ffd260);

background: -webkit-linear-gradient(bottom, #f66e22, #ffd260);

background: -o-linear-gradient(bottom, #f66e22, #ffd260);

6.多使用flex布局（一般處理上下左右居中）

display: flex;

display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
當然還有其他一些常見的，比如：
flex: 1;(自適應長度)
-webkit-flex: 1;
flex-direction: culumn;（對齊方式）
-webkit-flex-direction: column;
flex-wrap: wrap;(啟用換行，預設不換行)
-webkit-flex-wrap:wrap;
不再贅述，詳細請參考：
7.div模擬輸入框 設定placeholder  高度自適應

首先contenteditable="true"

div

div:empty::before

css 頁面特殊顯示效果

1.移動端最小設定字型為12px，如果想要更小字型效果 webkit transform scale 0.9 2.文字超過兩行時，末尾顯示點點的效果 overflow hidden text overflow ellipsis display webkit box webkit box orient...

CSS實現特殊背景效果

css3的出現使得一些以前需要用的背景效果也可以直接用css實現，今天分享一下三個用css3做的特殊背景。這三個例子都使用到了css3的線性漸變。下面以webkit引擎下的線性gradient用法為例 webkit linear gradient 最新線性漸變寫法 webkit gradient 老...

css 頁面效果實用篇

頁面常用css效果 一.預設三元素 超出部分用省略號表示 overflow hidden 超出部分隱藏 while space nowarp 內容強制不換行 text overflow ellipsis 設定超出部分用省略號表示 效果 二.頁面中的字母大小寫 text transform capit...