css揭秘的一些筆記

一, 背景與邊框

1. 當我們div背景色是白色,然后我們想給這個div加上一個白色半透明的邊框的時候發現這個邊框怎么不存在?
看不見半透明邊框
看見半透明邊框

其實這個邊框是實際存在的,只不過在設置邊框的時候,背景會被邊框壓下去,也就是說平時我們看到的邊框實際上是加在背景上面的如果邊框顏色與背景色不一樣那我們能很快辨別出來,像上面用同樣的顏色但是不一樣的透明度來體現的話需要給div設置一個background-clip,其值是padding-box; 這樣瀏覽器就會用內邊距的外沿把背景剪裁掉。

div{
  background: #fff;
  border: 3px solid rgba(255, 255, 255, 0.5);
  background-clip: padding-box;
}
2. 多重邊框

其實在沒有發現多重邊框之前我想達到這種效果都是div一個個嵌套,不像現在這樣簡單便捷就寫出來
解決方案是box-shadow的多重邊框

多重邊框
div{
  box-shadow: 0 0 0 10px #fff,
              0 0 0 15px #dedede,
              0 2px 5px 15px rgba(0, 0, 0, 0.5); 
}
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,803評論 0 2
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,335評論 0 11
  • 1、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,657評論 0 7
  • 【正面溝通??和諧親子】第四期 張紅云 堅持分享第118天 放假的第一天,今天上午孩子英語班要去春游。我一早...
    紅云_楊柳清風閱讀 247評論 0 0
  • swift 里沒有OC的分類概念,但可以用extension為類拓展方法。 下面的extension 為UIBut...
    蘇東沒有坡閱讀 1,555評論 0 3