設計圖含有斜切角的效果時，我們一般想到的方法是切出四個角為背景，然後用border連起來，這樣就能顯示出該效果了，那麼直接使用css呢？下面就整理css做斜邊的效果。
1、方案一：利用linear-gradient.chamfer{
background: #3b3;
background: linear-gradient(135deg, transparent 15px, #3b3 0) top left,
linear-gradient(-135deg, transparent 15px, #3b3 0) top right,
linear-gradient(-45deg, transparent 15px, #3b3 0) bottom right,
linear-gradient(45deg, transparent 15px, #3b3 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
效果如下：
2、方案二：利用clip-path
效果如下：
css曲線切口角的實現
上面實現的2種切口是直線的，如何實現曲線切口角呢？下面就介紹利用radial-gradient實現曲線切口角：
效果如下：
使用corner-shape
例如：corner-shape:bevel;
border-radius:10% / 30px;
width:400px;
height: 300px;
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...
CSS3 總結（二十） 彈性盒子（CSS3）
2.在彈性容器中可以設定min width max width屬性來限制彈性子元素的最小及最大縮放寬度。用在彈性容器 3.flex direction 屬性 用在彈性容器 指定了彈性子元素在父容器中的位置。值說明 row橫向從左到右排列 左對齊 預設的排列方式。row reverse 反轉橫向排列 ...
css3新動 css3新增動畫
1 transiition過渡 樣式改變就會執行transition 1 格式 transiition 1s width linear,2s 1s height 2 引數 transition property 要運動的樣式 all attr none transition duration 運動時...