上半橢圓
border-radius: 50% / 100% 100% 0 0;
左半橢圓
border-radius: 100% 0 0 100% / 50%;
左上四分之一圓
border-radius: 100% 0 0 0;
平行四邊形
1.平行四邊形是矩形的父集，各條邊兩兩平行，但是角度不一定是直角。
2.css建立平行四邊形的思路是通過 skew 實現。
3.直接將整個元素傾斜的話，元素的內容也會傾斜。
4.我們可以將內容單獨用一層結構包裹在傾斜元素內，然後將內容反向傾斜
5.按照這種思路我們可以將傾斜元素作為子元素，這樣就不會影響內容了，所以用偽元素代替是個好辦法
巢狀元素方案：
click me
.button
.button > div
偽元素方案：
click me
.button
.button::before
單側投影
一般我們使用 box-shadow 的方法是，指定三個長度值和乙個顏色值：
box-shadow: 2px 3px 4px rgba(0,0,0,.5);
box-shadow 的引數列表是 box-shadow: x y 模糊半徑r1 擴張半徑r2 顏色值;
所以上面的css屬性值會生成乙個相對於元素向右偏移2px，向下偏移3px，模糊半徑為4px的陰影，我們把陰影看做是乙個元素的話，這個元素的尺寸相當於比原來的元素大4*2=8px。
注意：確切地說，我們將在頂部看到1px的投影（4px-3px）、在左側看到2px（4px-2px）、在右側看到6px（4px+2px）、在底部看到7px（4px+3px）。在實踐中，投影看起來會比這些值稍小，因為投影的顏色在邊緣處的過渡不是線性的，這跟漸變不一樣。
如果要實現單側投影，我們就需要用到第四個屬性，擴張半徑啦。這個引數會根據你指定的值去擴大或（當指定負值時）縮小投影的尺寸。很顯然，當我們設定了模糊半徑之後，我們只有將擴張半徑設定為負數才能縮小陰影，那這個值具體是多大呢，只要小於模糊半徑的相反數就可以了，比如這樣設定：box-shadow: 0 5px 4px -4px black;。
鄰邊投影
要實現只在兩條鄰邊有 box-shadow ，最簡單的辦法就是在基礎用法上面將x和y的偏移量調整到大於模糊半徑的值就行，但是我們會發現這樣會造成元素有乙個比較大的陰影，視覺效果達不到要求，這時我們可以考慮結合擴張半徑屬性來進行優化，利用擴張半徑的負值來縮小陰影，具體數值該設定為多大呢，我們將偏移量調整為模糊半徑的一半，擴張半徑調整為模糊半徑相反數的一半，比如：box-shadow: 3px 3px 6px -3px black; 就可以達到最終想要的效果了。
雙側投影
擴張半徑在四個方向上的作用是均等的（也就是說，我們無法指定投影在水平方向上放大，而在垂直方向上縮小），唯一的辦法是用兩塊投影（每邊各一塊）來達到目的。然後基本上就是把「單側投影」中的技巧運用兩次：box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;。
總結border-radius是的優點
提高**效能
增加了視覺美觀性
**樣式圓角性
我們都用border-radius不用來顯示，這就大大增加了**的效能，大大增加了**的載入速度。
前端樣式技巧
目錄 1.在盒子中水平垂直居中 2.絕對定位子元素居中 3.清除浮動 3.1偽元素清除浮動 3.2雙偽元素清除浮動 4.定位實現垂直水平居中 4.畫三角形 5.文字圍繞浮動元素 6.單行文字溢位顯示省略號 7.表單輪廓和防止拖拽文字域 8.文字垂直居中對齊 9.底側有空白縫隙解決方案 10.多行溢位...
CSS secrets 讀書筆記（1）
開頭先寫點別的，今天終於離開了生活了一年的國家。心裡有點對未來的期待，終於不是個學生了。出國一年，獲得的收穫可能就是終於想通了以後想幹什麼吧，人總要有一項技術傍身，進可成名立萬，退可養家餬口。今天登機前終於有一家投了簡歷的公司聯絡我了，也算乙個好訊息。前幾天發現了一本寫css很好的書，叫做css s...
《CSS Secrets》讀書筆記（1）
三年重構老司機二刷 css secrets 覺得有些東西還是應該記錄下來，本文內容來自書籍 css secrets 中文名叫 css揭秘 做筆記的過程中我會根據自己的過往經驗加上自己的理解和看法，用通俗的表達對一些知識點進行解釋。本書的物件是有一定css開發經驗的人，如果你是新手，閱讀起來可能有點吃...