一個(gè)pscc的插件 可以識(shí)別圖層的樣式并返回css3的格式
css3Ps
下載后解壓,文件放到pscc安裝目錄的下Required/CEP/extensions下
使用方法:點(diǎn)擊選中圖層,打開(kāi)菜單欄里的窗口/拓展功能/css3ps ,點(diǎn)擊小窗口,會(huì)彈出新頁(yè)面,其中顯示css代碼(但是顏色識(shí)別有點(diǎn)問(wèn)題,另外版本有些老)
瀏覽器兼容不要手寫,用插件自動(dòng)處理
chrome 開(kāi)發(fā)者工具面板里的設(shè)置
勾選show user agent shadow DOM可以查看內(nèi)部結(jié)構(gòu)
.text{
font-size: 20px;
line-height: 20px;
margin-top: 40px;
width: 200px;
border: 1px solid #3397ff;
}
相比于上面的,下面的會(huì)更好,rem同樣, 1px時(shí)直接1px不用轉(zhuǎn)換
.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會(huì)使用當(dāng)前的元素的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)繼承父元素的元素(任何屬性都可以繼承),父元素因?yàn)楦?dòng)定位等產(chǎn)生的屬性變化也會(huì)繼承
繼承時(shí)最好屬性寫全如background-color
.box{
background: #333333;
border: 1px solid currentColor;
}
.text{
background-color:inherit;
border:inherit;
}
預(yù)處理器 sass less stylus等 誰(shuí)用誰(shuí)知道
margin,padding等設(shè)為百分比時(shí)是以父級(jí)的width為基準(zhǔn),不涉及height
counters 計(jì)數(shù)器
css自帶計(jì)數(shù)器,配合定位,列表 可實(shí)現(xiàn)編號(hào)后為頓號(hào)的效果
ul{
counter-reset: section;//設(shè)置計(jì)數(shù)器
list-style:none;
}
li:before{
counter-increment: section;
content: counter(section) "、";
}
pointer-events: none;
取消點(diǎn)擊事件
一個(gè)很奇妙的地方(背景)
一個(gè)很神奇的地方(動(dòng)畫(huà))
top:calc(50% - 40px);
calc屬性可以計(jì)算
透明顏色
color:transparent;
transition的貝塞爾曲線
transition:cubic-bezier(.25,.1,.25,1)