南順網絡

平時自(zì)己項目中用到的(de) CSS

outline 移除當選中input元素的(de)時候會出現狀态線

div {    outline: none; //一(yī)般情況下移除它    // outline: 5px dotted red; 也可(kě)以設置樣式 }

contenteditable 設置element是否可(kě)編輯

<p contenteditable="true">可(kě)編輯</p>

webkit-playsinline

手機video 都可(kě)以在頁面中播放，而不是全屏播放了。

<video src="test.mp4" webkit-playsinline="true"></video

user-select 禁止用戶選中文本

div {    user-select: none; }

css實現不換行、自(zì)動換行、強制換行

//不換行 white-space:nowrap; //自(zì)動換行 word-wrap: break-word; word-break: normal; //強制換行 word-break:break-all;

calc() function, 計算屬性值

div {    width: calc(100% - 100px); }

CSS3 filter Property 圖片過濾

img {

    filter: grayscale(100%); //灰度

    filter: blur(5px); //模糊

    filter:brightness(200%); //高(gāo)亮(liàng)

    filter:saturate(8); //飽和(hé)

    filter:sepia(100%); //懷舊(jiù)

    ...

}

使用css創建三角形

div {

    border-bottom: 10px solid white;

    border-right: 10px solid transparent;

    border-left: 10px solid transparent;

    height: 0px; 

    width: 0px; 

}

clip屬性，截取你想要顯示的(de)圖片

img {    position: absolute;    clip: rect(0px,60px,200px,0px); }

編輯:--ns868