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