###### tags: `六角筆記王` `前端筆記` `CSS`
# CSS3的border效果
## 圓弧效果border-radius
語法

height: 150px;
width: 150px;
background: #000;
/*以上是正方形*/

1.如果要變成圓潤的四方形

border-radius:30px;

2.如果要變成圓形

border-radius:50%;

3.如果要設定某個角變圓潤

border-radius:50px 0 50px 0;

4.把圓裡面的字設定置中

line-height: 150px;/*讓行距跟寬高一樣高*/
text-align: center;

顯示效果：


## 漸層效果linear-gradient(A顏色,B顏色)

可以代替img的背景圖，達到節省流量的好處

1.預設是從上到下
語法

height: 150px;
width: 150px;
background: linear-gradient(A顏色,B顏色);
/*以上是正方形*/

2.想要變成從左邊到(to)右邊
口訣： to 到哪一邊

height: 150px;
width: 150px;
background: linear-gradient(to方向,A顏色,B顏色);
/*以上是正方形*/

顯示效果：
[css3漸層網站](https://www.w3schools.com/css/css3_gradients.asp)

## 陰影效果box-shadow

1.基本語法

box-shadow: x軸長度 y軸長度 背景顏色;

2.做出柔焦感

box-shadow: x軸長度 y軸長度 10px(擴散程度) 背景顏色;

顯示效果：


## 使用 can I use 查詢 HTML、CSS 瀏覽器兼容度

1.[網站](https://caniuse.com/)

## 使用 Statcounter 瀏覽各國瀏覽器趨勢

1.[網站](https://gs.statcounter.com/)