css常用效果总结
2018-08-20 本文已影响1人
CRUD_科科
css黑魔法总结
1、每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？css代码是很简单的，用的是css的filter功能。
html {
filter: grayscale(100%);//IE浏览器
-webkit-filter: grayscale(100%);//谷歌浏览器
-moz-filter: grayscale(100%);//火狐
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);//谷歌浏览器
}
有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的和之间插入：
<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>
2、DIV可编辑，就是让一个div变成一个类似input输入框的效果。
在div中添加contentEditable="true" 属性就可以了，如下：
<div id="div1" contentEditable="true" ></div>
<div id="div2" contentEditable="true" ></div>
<div contentEditable="true" id="div3"></div>
3、有些网站为了不让用户复制，设置了div禁止选择的功能，设置如下属性：
/**
*unselectable="on" onselectstart="return false;"
*/
<div unselectable="on" onselectstart="return false;">
sdfsdfswerwer324234234234
</div>
这样，DIV里面的东西就不能选择复制了！
4、CSS 中form表单两端对齐
做form表单的时候，前面经常有姓名，年龄，公司名称等等，有的是2个字，有的是4个字，如何让字对齐呢？有的人的做法是打几个空格，但是这样不是很准确，最好的办法是如下：
- css
.test1 {
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
.test1:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
}
- html
<div class="box1">
<div class="test1">姓 名</div>
<div class="test1">姓 名 姓 名</div>
<div class="test1">姓 名 名</div>
<div class="test1">所 在 地</div>
<div class="test1">工 作 单 位</div>
</div>
5、input声音录入按钮，（紧支持谷歌）
<input type="text" class="box" name="s" id="s" class="inputText" placeholder="输入关键词" x-webkit-speech>
6、给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;
}
效果
7、滚动轴美化，一下代码是针对谷歌中滚动轴的设置美化，把它加到你的css中就可以了，代码如下：
::-webkit-scrollbar{
padding-left:1px;
background-color:#fafafa;
overflow:visible;
width:9px;
}
::-webkit-scrollbar-thumb{
background-color:rgba(0, 0, 0, .1);
background-clip:padding-box;
border-left-width:2px;
min-height:10px;
box-shadow:inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);
}
::-webkit-scrollbar-thumb:vertical:hover{
background-color:rgba(0, 0, 0, .2);
}
::-webkit-scrollbar-thumb:vertical:active{
background-color:rgba(0, 0, 0, .2);
}
::-webkit-scrollbar-button{
height:0;
width:0;
}
::-webkit-scrollbar-track{
background-clip:padding-box;
border:solid transparent;
border-width:0 0 0 2px;
}
::-webkit-scrollbar-corner{
background:transparent;
}
::-webkit-scrollbar-track-piece{
margin: 10px 0;
-webkit-border-radius: 0;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
}
8、选中文字状态颜色的修改,如下图：
::selection {
background: #ff0;
}
效果
9、css input[type=file] 样式美化，input上传按钮美化
-
思想
input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。 -
html
<a href="javascript:;" class="a-upload">
<input type="file" name="" id="">点击这里上传文件
</a>
<a href="javascript:;" class="file">选择文件
<input type="file" name="" id="">
</a>
- css
/*a upload 效果1 */
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
/*效果2*/
.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;
}
效果1
效果2
- 显示上传文件名称
$(".a-upload").on("change","input[type='file']",function(){
var filePath=$(this).val();
if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
$(".fileerrorTip").html("").hide();
var arr=filePath.split('\\');
var fileName=arr[arr.length-1];
$(".showFileName").html(fileName);
}else{
$(".showFileName").html("");
$(".fileerrorTip").html("您未上传文件，或者您上传文件类型有误！").show();
return false
}
})
10、CSS :after 和：before选择器
/* clear浮动影响 */
.clearfix{
display: inline-block;
&:after{
content: '';
display: block;
height: 0;
line-height: 0;
clear: both;
visibility: hidden;
}
}
/* border-1px */
@mixin border-1px($color) {
position: relative;
&:after {
content: '';
display: block;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
border: 1px solid $color;
box-sizing: border-box;
}
}
11、透明度
opacity: .9;
filter:alpha(opacity=90)
12、超出长度显示省略号
- 一般要指定宽度，然后给如下四个属性。
display:bolck;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
- 跨浏览器兼容的方案
p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
// background:url(和网页背景颜色一样的一张背景图) repeat-y;
background-color:#fff;
}
13、阴影效果
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.2);
14、CSS强制换行和不换行
//自动换行
div{
word-wrap: break-word;
word-break: normal;
}
//强制英文单词断行
div{
word-break:break-all;
}
//强制不换行
div{
white-space:nowrap;
}
15、CSS3的一些前缀总结
-webkit /*为Chrome/Safari*/
-moz /*为Firefox*/
-ms /*为IE*/
-o /*为Opera*/
16、模糊遮罩效率，模糊滤镜效果
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
