::-Webkit-Input-Placeholder
input 的 H5 placeholder
属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placeholder
属性来改。
配合 opacity 属性使用效果更好
- <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Inpput_Placeholder(输入框)</title><style>input{color: red;}::-webkit-input-placeholder{color: blueviolet;opacity: 0.5; }::-moz-placeholder{color: blueviolet;opacity: 0.5;}:-moz-placeholder{color: blueviolet;opacity: 0.5;}:-ms-input-placeholder{color: blueviolet;opacity: 0.5;}</style></head><body>登录:<br><input type="text" placeholder="请输入账号"><br><input type="text" placeholder="请输入密码"></body></html>

Outline 当点击Input元素时显示的当前状态线(外发光)
- <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Outline 外发光</title><style>input{width:400px;height:100px;font-size: 20px;}.txt_one{outline: none;}.txt_two{outline:none;box-shadow: green 1px 1px 30px 5px;}p{width:500px;height: 200px;border: 1px solid red;margin: 30px auto;}</style></head><body><input type="text" class="txt_one" placeholder="请点击这三个输入框比较效果"><input type="text" class="txt_two" placeholder="请点击这三个输入框比较效果"><input type="text" class="txt_three" placeholder="请点击这三个输入框比较效果"><br><p>边框阴影(box-shadow)的基本语法:<br>box-shadow:color h-shadow v-shadow blur spread inset;<br>color:阴影颜色 ------------ 可选 <br>h-shadow :水平偏移量 ----必选 <br>v-shadow:垂直偏移量-----必选 <br>blur:模糊距离 -------------可选 <br>spread:阴影尺寸---------- 可选 <br>inset:内阴影 --------------可选 <br></p></body></html>

Contenteditable 设置Element是否可编辑
- <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Contenteditable 设置Element(标签)可否编辑</title></head><body><p contenteditable="true">可编辑</p><span contenteditable="false">不可编辑</span></body></html>

Webkit-Playsinline
手机video 都可以在页面中播放,而不是全屏播放了。
- <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body>用html5的video方式播放视频时,在ipad上是默认原来大小的,而在iphone上是默认全屏播放的。
- HTML里video必须加上webkit-playsinline属性 <br><video id="video" controls="controls" webkit-playsinline="true" src="zaa47.mp4"><!--src是视频的路径-->Your browser does not support HTML5 video.</video></body></html>

Position: Absolute, 让Margin有效的
设置left:0, right:0 就可以。原因是2边都是0不存在边距,element就可以得出距离,并居中。
- <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Positon: Absolut (让Margin更有效)</title><style>div{width: 100px;height: 100px;border: 1px solid red;position: absolute;left: 0;top: 0;margin: 0 auto;}</style></head><body><div></div></body></html>
这个太简单了,不发了。
使用 Clearfix 清楚浮动,解决父类高度崩塌。
- .clearfix {
- zoom: 1;
- }
-
- .clearfix:after {/*http://www.w3school.com.cn/tiy/t.asp?f=css_sel_after*/
- visibility: hidden;
- display: block;
- font-size: 0;
- content: " ";
- clear: both;
- height: 0;
- }
这个不知道怎么说
User-Select 禁止用户选中文本
- div {
- user-select: none; /* Standard syntax */
- }
::-Webkit-Scrollbar-Thumb可以修改谷歌的滚动条样式,safari好像也可以
使用CSS Transforms 或者 Animations时可能会有页面闪烁的Bug
- -webkit-backface-visibility: hidden;
-Webkit-Touch-Callout 禁止长按链接与图片弹出菜单
- -webkit-touch-callout: none;
Transform-Style: Preserve-3d 让元素支持3d
- div {
- -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
- -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
- transform: rotateY(60deg);
- transform-style: preserve-3d;
- }
Perspective 透视
这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。
- .div-box {
- perspective: 400px;
- }
Css实现不换行、自动换行、强制换行
- //不换行
- white-space:nowrap;
-
- //自动换行
- word-wrap: break-word;
- word-break: normal;
-
- //强制换行
- word-break:break-all;
常用的选择器 :Nth-Child() Selector
以下代码是选择父类下第一个子节点,p元素,建议学习这个样式属性的使用,很实用的。
- p:nth-child(1) {
- ...
- }
Css3 Linear-Gradient 线性渐变默认开始在top, 也可以自定义方向。
- <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Css3 Linear-Gradient 线性渐变</title><style>div{width: 100px;height: 100px;border: 1px solid red;margin: 10px;float: left;}p{clear: both;}.txt1{background: linear-gradient(aqua,red);}.txt2{background: linear-gradient(aqua,black 50%,red);}.txt3{background: linear-gradient(0deg,aqua 20%,black 50%,red 80%);}.txt4{background: linear-gradient(45deg,aqua,black 50%,red);}.txt5{background: linear-gradient(to top right,aqua,black 50%,red)}</style></head><body><div class="txt1"></div><div class="txt2"></div><div class="txt3"></div><div class="txt4"></div><div class="txt5"></div><br><p><br>下述值用来表示渐变的方向,可以使用角度或者关键字来设置: <br>angle:
- 用角度值指定渐变的方向(或角度)。 <br>to left: <br>设置渐变为从右到左。相当于: 270deg <br>to right: <br>设置渐变从左到右。相当于: 90deg <br>to top: <br>设置渐变从下到上。相当于: 0deg <br>to bottom: <br>设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。 <br>color-stop 用于指定渐变的起止颜色: <br>color:
- 指定颜色。 <br>length:
- 用长度值指定起止色位置。不允许负值 <br>percentage:
- 用百分比指定起止色位置。 <br></p></body></html>
