loading...

0

css冷门属性

css读完大概需要6分钟

  • 发布时间:2017-09-21 16:15 星期四
  • 刘伟波
  • 229
  • 更新于2017-12-15 21:18 星期五

1. cursor:zoom-in | zoom-out 放大缩小 grab | grabbing  手型抓取


2. CSS3 greyscale 滤镜实现  图片转为黑白,每逢大的灾难的时候,很多网站变成了灰色,

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);  //chrome18+
	
    filter: gray;
}

3.CSS3 blur滤镜实现  图片模糊化

.blur {    
    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);    
}


4. 给 body 添加行高

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可:·

//code from http://caibaojian.com/useful-css-tips.html
body {
  line-height: 1;
}

这样文本元素就可以很容易地从 body 继承。


5. 优化显示文本

有时,字体并不能在所有设备上都达到最佳的显示,所以可以让设备浏览器来帮助你:·

//code from http://caibaojian.com/useful-css-tips.html
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

注:请负责任地使用 optimizeLegibility。此外,IE /Edge没有 text-rendering 支持。



6. 使用属性选择器用于空链接

当a元素没有文本值,但 href 属性有链接的时候显示链接:·

//code from http://caibaojian.com/useful-css-tips.html
a[href^="http"]:empty::before {
  content: attr(href);
}

相当方便。


7.给input的placeholder设置颜色

::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}


8.DIV可编辑,就是让一个div变成一个类似input输入框的效果。

<div id="div1" contentEditable="true"  ></div>

<div contenteditable="plaintext-only" placeholder="请输入内容"></div>


9、css input[type=file] 样式美化,input上传按钮美化

<style>
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>


<a href="javascript:;" class="file">选择文件
<input type="file" name="" id="">
</a>

10、css 换行

/* 自动换行 */
div{
word-wrap: break-word;
word-break: normal;
}
/* 强制英文单词断行 */

div{
word-break:break-all;
}
/* 强制不换行 */

div{
white-space:nowrap;
}


你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 平台,一般一天之内就会回复。
    关于技术问题或者有啥不懂的都可以留言,我会定期回复答 疑,推荐最新仓库 前端知识体系, 感謝支持!