css3常用方法及問題解決

目錄導航

• 文本換行
• 陰影設置
• 垂直居中
• css三角

一、常用樣式方法

1、文本換行

• 普通換行隱藏省略三個小點

width: 480px;/* 限制寬度*/
overflow: hidden;/* 超出省略*/
white-space: nowrap;/* 強制不換行 */
text-overflow: ellipsis;/* 用三個省略號代替 */

效果圖如下

• 文本多行隱藏

/* 不建議設置高度*/
	width: 480px;/* 限制寬度*/
	display: -webkit-box !important;/* 設置專屬的盒子類型*/
	overflow: hidden;/* 超出省略*/
	-webkit-line-clamp: 2;/* 行數設定*/
	-webkit-box-orient: vertical;/* 設置行的方向*/

效果圖如下

• 若是設置英文失效的話建議加一個屬性

word-break: break-all; /* 可以強行截斷英文單詞，達到詞內換行效果。*/

2、陰影設置

外部陰影第一個值左右的長度（負值->左邊）
第二個值上下（負值->上邊）
第三個值模糊值（越大越模糊）不能爲負默認0就很銳利、像邊框
第四個值陰影長度值，默認爲0，正數陰影擴大、負數陰影內縮（不常用）
第五個值表示顏色，默認則和瀏覽器相關
內部陰影左右上下取值相反

	.r_down {
		box-shadow: 10px 10px 5px blue;/* 右下 */
	}

	.r_up {
		box-shadow: 10px -10px 10px blue;/* 右上 */
	}

	.l_down {
		box-shadow: -10px 10px 15px;/* 瀏覽器默認顏色 */
	}

	.l_up {
		box-shadow: -10px -10px blue;/* 左上 */
	}

	.in_r_down {
		box-shadow: 10px 10px 10px inset blue;/* 左上 */
	}

效果圖

3、垂直居中

1、定位方式

/*1）如果父級不設置定高top失效*/
width:500px;
height: 500px;
background-color: #123456;
position:absolute;
/*第1種方式*/
left:50%;
top:50%;
transform:translate(-50%,-50%);/*transform有時候會失效，可能是兼容問題使用margin方式也可以*/
/*margin:-250px 0 0 -250px;x、y方向上都減去一半*/
/*第2種方式*/
top:0;
left:0;
right: 0;
bottom: 0;
margin:auto;

2、flex佈局設置

/*父級設置、高度必須*/
height:689px;
display:flex;
justify-content: center;
align-items: center;

3、計算方式

/*上下居中用定值，左右居中用計算*/
margin:95px calc((100% - 500px)/2);

4、css三角

通過border的屬性去設置三角
兩種方式（設置透明, 隱藏其中三個三角形）

 .sanjiao{
	width:0px;
	height:0px;
	border: 20px solid;
	border-color:transparent transparent transparent #ef4848;
}

或者直接設置透明邊框再單獨設置某個方向的三角

.snajiao{
	width:0px;
	height:0px;
	border: 20px solid transparent;
	border-left:50px solid #ef4848;
}

效果圖：

二、經常遇到的問題

1、相鄰元素之間有縫隙

• margin值和padding值度爲0，但是兩個相連個元素之間就是有縫隙。
  原因：display:inline-block之後，元素間有換行導致的問題
  解決：設置margin的負值或者是將換行去掉即可。

2、消除雙擊帶來的背景陰影

css相對應元素設置即可

user-select: none;

三、總結

不斷更新補充，有更好的解決方式歡迎補充評論！！