CSS3新增屬性信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》前端技術開發知識儲備邊框圓角設置1元素陰影設置201邊框圓角設置前端技術開發01邊框圓角屬性CSS3提供了創建圓角邊框的屬性,語法如下：border-*-*-radius：length|%length|%使用CSS3屬性需要注意瀏覽器兼容性問題說明：

border-*-*-radius中第1個“*”用top或bottom，第2個“*”使用left或right來表示邊框圓角位置。

使用1-2個值來設置水平方向(X軸)和垂直方向(Y軸)的值，長度或百分比來表示01邊框圓角屬性CSS3設置邊框圓角的屬性：屬性描述border-radius每個分量可取1-4個值border-top-left-radius定義了左上角的弧度，1-2個值border-top-right-radius定義了右上角的弧度，1-2個值border-bottom-right-radius定義了右下角的弧度，1-2個值border-bottom-left-radius定義了左下角的弧度，1-2個值01邊框圓角屬性設置1個值，即一個正圓設置兩個不相等的值，則是一個橢圓。總結：每個角可以使用X軸、Y軸上的兩個值表示，相等時，可使用一個值表示。border-top-left-radius：15px;圓角設置一個值：圓border-top-left-radius：20px15px;圓角設置兩個值：橢圓01邊框圓角屬性border-radius：length|%

/length|%設置圓角邊框綜合屬性,語法如下：說明：

第一個分量可以使用1-4個值表示水平方向(X軸)上四個角的設置，長度或百分比來表示。

第二個分量可以使用1-4個值表示垂直方向(Y軸)上四個角的設置，長度或百分比來表示。01邊框圓角屬性border-radius:25px;border-radius:15px50px30px;border-radius:15px50px;border-radius:

15px50px30px5px;同時設置4個角1個值第1個值為左上和右下第2個值為右上與左下2個值第1個值為左上角第2個值為右上和左下第3個值為右下角3個值第1個值為左上角第2個值為右上角第3個值為右下角第4個值為左下角4個值01邊框圓角屬性border-radius:50%;用法一：如何將網頁元素設置為圓形？

圓角半徑為元素長度的50%，該元素顯示為圓形用法二：簡寫方式border-radius:4px3px6px/2px

4px;border-top-left-radius:4px2px;border-top-right-radius:3px4px;border-bottom-right-radius:6px2px;border-bottom-left-radius:3px4px;X軸：3個值表示Y軸：2個值表示前端技術開發02元素陰影設置邊框陰影設置前端技術開發02box-shadow：x-offsety-offsetblurspreadcolorstyle;CSS3提供了設置邊框陰影的屬性，語法如下：說明：

x-offset：定義水平陰影的偏移距離，可以使用負值。

y-offset：定義垂直陰影的偏移距離，可以使用負值。blur：定義陰影的模糊半徑，只能為正值。spread：定義陰影的大小。color：定義陰影的顏色。style：定義是外陰影還是內陰影。outset（默認值）表示外陰影；inset表示內陰影。邊框陰影設置前端技術開發02box-shadow屬性為4個方向的邊框定義獨立的陰影效果。selector{box-shadow:-5px012pxred,/*左陰影*/

0-5px12pxyellow,/*上陰影*/

05px12pxblue,/*下陰影*/

5px012pxgreen;/*右陰影*/}其中每條邊的陰影屬性值之間用英文逗號隔開。-5px-5px邊框陰影設置前端技術開發02box-shadow屬性設置邊框陰影效果實例：外陰影box-shadow:0010px#000;右下陰影box-shadow:2px2px5px#000;內陰影box-shadow:inset0px0px5px1px#000;1234透明陰影box-shadow:12px12px2px1pxrgba(0,0,255,.1);04總結CSS3設置圓角屬性如下：CSS3設置邊框陰影屬性如下：box-s