css笔记

1、背景渐变透明

background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0.4) 98%, #888 100%);

2、清除input默认文字样式

input::-webkit-input-placeholder {color: #fff;font-size: 15px;}

/*消除浏览器自带的背景*/

input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus {
    /*背景颜色*/
    box-shadow:0 0 0 60px #fff inset;
    /*字的颜色*/
    -webkit-text-fill-color: #626262;
}

参考链接：https://www.cnblogs.com/huanghuali/p/9893160.html

3、文字方向

#test{

-webkit-writing-mode: vertical-rl;

/*horizontal-tb:水平方向自上而下的书写*/

/*vertical-rl：垂直方向 自右而左方向书写*/

/*vertical-lr：垂直方向 自左而右方向书写*/

writing-mode: vertical-rl; writing-mode: tb-rl;

/*ie下的写法 t-上b-下r-右l-左 ,可以自由组合 bt-rl,lr-tb*/ }

4、背景颜色渐变

从上到下

div { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法 */ }

从左到右

div { background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red , blue); /* 标准的语法 */ }

5、去掉Egde浏览器对电话号码的默认样式，以及苹果手机对电话号码的默认样式（手机号码不被显示为拨号链接）

<meta name="format-detection" content="telephone=no">

6、去掉苹果手机点击input框自动放大的样式

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

7、背景虚化

div{

-webkit-filter: blur(9px);

-moz-filter: blur(9px);

-o-filter: blur(9px);

-ms-filter: blur(9px);

filter:blur(9px);

}

8、灰度图片

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

参考链接：https://blog.csdn.net/qq_15096707/article/details/47130877

9、调整滚动条

.aboutAdv::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
    }
.aboutAdv::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #2945ff;
    }
.aboutAdv::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }

参考链接：https://www.cnblogs.com/lfhy/p/6796653.html

10、改变光标样式

div{

cursor: url("../images/pointer.ico"),auto;

}

光标图片只能是ico格式，可以先在网站找转换为ico的工具进行转换

11、发送短信

<a href="sms:15111334355"><i></i><p>短信</p></a>

参考链接：https://blog.csdn.net/qq_33646205/article/details/87179692

不过如果是编辑好的信息，苹果手机无法正确调起短信

12、导入字体库

字蛛：http://font-spider.org/

常用字：https://www.zdic.net/zd/zb/cc1/

在线字体转换工具：https://www.fontke.com/tool/convfont/

需要转换成ttf、eot、woff、svg

13、视频自动循环不静音播放【不能自动播放……】

<video width="100%" height="240" autoplay="autoplay" controls="controls" loop="loop" preload>
   <source src="/Upload/20150605.mp4" type="video/mp4"><!--兼容IE9+、Chrome和Safari-->
   <source src="/Upload/20150605.ogg" type="video/ogg"><!--兼容Firefox、Opera和Chrome-->
   <source src="/Upload/20150605.webm" type="video/webm"><!--兼容Firefox、Opera和Chrome-->
   <object data="/Upload/20150605.mp4" width="100%" height="240">
     <embed src="/Upload/20150605.mp4" width="100%" height="240">
   </object> 
</video>

如果要静音播放添加muted属性，可以实现自动播放

14、<table align="center">，align在IE789中的权重高于margin，在其他浏览器中似乎无效，在 HTML 4.01 中，<table> 的 align 属性已废弃