css 頁面特殊顯示效果

2022-09-07 02:12:11 字數 1542 閱讀 1076

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...