本小節(jié)內容是一些小的知識點奏路，比較零散
目錄
1.CSS易維護性 v.s.簡潔
2.currentColor-當前的標簽所繼承的文字顏色
3.inherit-繼承父元素的相應屬性
4.視覺誤差
1. CSS易維護性 v.s.簡潔
代碼示例1
簡潔的代碼
border-width: 10px 10px 10px 0;
易維護的代碼
border-width: 10px;
border-left-width: 0;
分析：
簡潔的代碼 1.我們需要編輯3次
易維護的代碼 1.編輯次數變少 2.易閱讀
2. currentColor-當前的標簽所繼承的文字顏色
代碼示例2
html
<div>
this is div
<p>this is p</p>
</div>
css
p{
color:deeppink;
text-shadow: 10px 10px 10px currentColor;
}
currentColor效果圖
3.inherit-繼承父元素的相應屬性
代碼示例3
html
<div class="callout">
Only letters,numbers,underscores(_) and hyphens (-) allowed!
</div>
css
.callout{
position:relative;
}
.callout::before {
content: '';
position: absolute;
top: -.4em;
left: 1em;
padding: .35em;
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}
**background: inherit; **
**border: inherit; **
繼承了父級背景色和邊框色
4.視覺誤差
人眼總會把黃色線誤認為文字留白線
而瀏覽器則認為是黑線
原圖
兩側比上下窄
因此我們可以把上下兩側的padding留白設置大于左右兩側
