一个pscc的插件 可以识别图层的样式并返回css3的格式
css3Ps
下载后解压,文件放到pscc安装目录的下Required/CEP/extensions下
使用方法:点击选中图层,打开菜单栏里的窗口/拓展功能/css3ps ,点击小窗口,会弹出新页面,其中显示css代码(但是颜色识别有点问题,另外版本有些老)
浏览器兼容不要手写,用插件自动处理
chrome 开发者工具面板里的设置
勾选show user agent shadow DOM可以查看内部结构
.text{
font-size: 20px;
line-height: 20px;
margin-top: 40px;
width: 200px;
border: 1px solid #3397ff;
}
相比于上面的,下面的会更好,rem同样, 1px时直接1px不用转换
.box{
font-size: 20px;
}
.text{
font-size: 1em;
line-height: 1em;
margin-top: 2em;
width: 20em;
border: 1px solid #3397ff;
}
.text{
color: #3397ff;
border: 1px solid #3397ff;
}
使用currentColor会使用当前的元素的color属性
.text{
color: #3397ff;
border: 1px solid currentColor;
}
.box{
background: #333333;
border: 1px solid currentColor;
}
.text{
line-height: 2em;
background:inherit;
border:inherit;
}
inherit 继承(记忆 in-her-it)继承父元素的元素(任何属性都可以继承),父元素因为浮动定位等产生的属性变化也会继承
继承时最好属性写全如background-color
.box{
background: #333333;
border: 1px solid currentColor;
}
.text{
background-color:inherit;
border:inherit;
}
预处理器 sass less stylus等 谁用谁知道
margin,padding等设为百分比时是以父级的width为基准,不涉及height
counters 计数器
css自带计数器,配合定位,列表 可实现编号后为顿号的效果
ul{
counter-reset: section;//设置计数器
list-style:none;
}
li:before{
counter-increment: section;
content: counter(section) "、";
}
pointer-events: none;
取消点击事件
top:calc(50% - 40px);
calc属性可以计算
透明颜色
color:transparent;
transition的贝塞尔曲线
transition:cubic-bezier(.25,.1,.25,1)