角的設計風格越來越流行，這也要求了前端開發人員，必須要掌握圓角屬性。

Css提供了一個圓角屬性，可以很方便實現圓角，而且還可以任意設置圓角的度數，以達到設置任意弧度的圓角，甚至讓本元素變成圓球；如果還能靈活運用，什么樣的形狀都能做出來。這個圓角屬性學問不少。

語法

border-radius：數值；

數值常用px作為單位，值越大，那么圓角就越圓。

這個數值有三種設置方法

（1）僅設置一個值

應該是我們最常用的一種情況了，常用來給button加圓角邊框，或者畫一個圓形按鈕，僅需設置一個數值，即可給元素的四個邊角設置統一的圓角弧度。

（2）設置四個方向的值

這里要注意四個數值的書寫順序，border-radius采用的是左上角、右上角、右下角、左下角的順序

（3）對稱值

采用對角線相等的原則,左上角和右下角，右上角和左下角是一對。

案例

現在基本上設計稿都是圓角類型，有些矩形的角是圓角，有些矩形是半圓型，有些干脆是整個都是圓。其實都是稍微改變一下圓角弧度。

以下做個參考，基本實際開發都是這些。

當然還有很多奇形怪狀，也都是僅僅改變每個角的圓角弧度。

知識導圖

、CSS陰影（box-shadow）

1.盒子陰影

語法
box-shadow:h-shadow v-shadow blur spread color inset;

• 默認為外陰影(outset)，但是不可以寫這個單詞，否則無效
• 盒子陰影不占用空間，不會影響其他盒子排列
• 鼠標經過div為div:hover {box-shadow: 10px 10px;}

2.文字陰影（text-shadow）

語法
text-shadow：h-shadow v-shadow blur color；

三、圓角邊框（border-radius）

語法
border-radius：length;

• 半徑原理：圓與邊框的交集形成圓角效果
• 參數值可以為數值或百分比形式
• 若為正方形，想設置為圓，把數值改為高/寬的一半，或直接寫為50%
• 若為矩形，設為高的一半即可
• 該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角，右上角，右下角，左下角
• 分開寫：border-top-left-radius | border-top-right-radius
  border-bottom-left-radius | border-bottom-right-radius

、Background-size 背景尺寸

說明：background-size 規定背景圖像的尺寸 屬性值

length (10px) 規定背景圖的大小。第一個值寬度，第二個值高度。（直接定義背景圖的大小） Percentage(%) 以百分比為值設置背景圖大小（參照元素的大小） cover 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域 contain 把圖像圖像擴展至最大尺寸，以使其寬度或高度完全適應內容區域。

復合式寫法：background: url(img/laoli.jpg) no-repeat 0 0/cover;說明：backgroun-size和background-position要用 “ / ” 組成一個屬性值一起寫；

2、background-origin 背景原點（起始點）位置

說明：指定background-origin屬性應該是相對位置 屬性值 padding-box 背景圖像填充框的相對位置 （從padding區開始顯示背景圖）默認值 border-box 背景圖像邊界框的相對位置（從邊框區開始顯示背景圖） content-box 背景圖像的相對位置的內容框 （從內容區開始顯示背景圖）

3、background-clip 背景裁切

說明：background-clip 屬性規定背景的繪制區域。 屬性值 border-box 背景被裁剪到邊框盒。 默認值 padding-box 背景被裁剪到內邊距框。 content-box 背景被裁剪到內容框。 擴展：text： 背景被裁剪到文字。說明：-webkit-background-clip: text; 使用時要加瀏覽器前綴

4、添加多張背景圖:

語法：background:url(),url();

background:url(img/corner_lt.gif) no-repeat left top, url(img/corner_rt.gif) no-repeat right top, url(img/corner_rb.gif) no-repeat right bottom, url(img/corner_lb.gif) no-repeat left bottom;

background-color:#63ceff;

5、模糊：blur

filter : blur(value) 說明：值越大，越模糊；

6、圖片邊框屬性：

border-image 屬性是一個簡寫屬性，用于設置以下屬性: border-image-source 用在邊框的圖片的路徑。 border-image-slice 圖片邊框向內偏移(不加單位)。 border-image-repeat 圖像邊框是否應平鋪(repeat)、鋪滿(round)或拉伸(stretch) border-image-outset 邊框圖像區域超出邊框的量(值是一個倍數或者具體的數值)

7、CSS圓角屬性：

Border-radius：

語法：border-radius: 20px; 代表每個角的X軸的弧度和Y軸的弧度是一樣的；

語法：border-radius: 20px/50px; 代表每個角的X軸的弧度是20px,Y軸的弧度是50px；

說明：10px 20px 30px 40px/50px 40px 30px 20px; “/ ”前表示X軸的弧度 ；“/ ”后 表示Y軸的弧度

用法： border-radius: 10px; 四個角的值都是10px; border-radius: 10px 20px; 值1：左上和右下 ；值2 ：右上和左下 border-radius: 10px 20px 30px ; 值1：左上 ；值2 ：右上和左下 ；值3：右下； border-radius: 10px 20px 30px 40px ; 值1：左上 ；值2 ：右上和 ；值3：右下； 值 4：左下

8、css3 calc()（四則運算）

說明：width:calc(100% - 200px); width:calc(100% - 200px);

注：運算符前后必須要留空格； + - * / 加法和減法直接寫數值就好； 乘法和除法 要寫倍數 不用加單位 ；

9、pointer-events：阻止鼠標事件 、 穿透效果

pointer-events:none;