您當前位置: 南順網絡>> 官方資訊>> 建站知識

平時自己項目中用到的 CSS

outline 移除當選中input元素的時候會出現狀態線

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

contenteditable 設置element是否可編輯

<p contenteditable="true">可編輯</p>

webkit-playsinline

手機video 都可以在頁面中播放,而不是全屏播放了。

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

user-select 禁止用戶選中文本

div {    user-select: none; }

css實現不換行、自動換行、強制換行

//不換行 white-space:nowrap; //自動換行 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%); //高亮

    filter:saturate(8); //飽和

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

    ...

}

使用css創建三角形


div {

    border-bottom: 10px solid white;

    border-right: 10px solid transparent;

    border-left: 10px solid transparent;

    height: 0px; 

    width: 0px; 

}

clip屬性,截取你想要顯示的圖片

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

編輯:--ns868