南顺网络

平时自己项目中用到的 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