CSS3邊框 · JavaWeb教案2019

## CSS3邊框 ### 1.圓角邊框 `border-radius` :用于指定圓角邊框的圓角半徑。 * 如指定1個參數，則4個圓角都使用該長度作為半徑。 * 如指定2個參數，則第一個參數作為左上角和右下角的半徑，第二個參數作為右上角和左下角的半徑。 * 如指定3個參數，第一個參數作為左上角的半徑，第二個參數作為右上角和左下角的半徑，第三個參數作為右下角的半徑。 ```html <style> div{ border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300px; border-radius:25px; } </style> <body> <div>border-radius 屬性允許您為元素添加圓角邊框！ </div> </body> ``` ### 2.邊框陰影 `box-shadow`屬性用于增加盒模型元素的邊框陰影。一共有5個參數。 * 第一個參數：控制陰影在水平方向的偏移。 * 第二個參數：控制陰影在垂直方向的偏移。 * 第三個參數：控制陰影的模糊程度。 * 第四個參數：控制陰影的縮放程度。 * 第五個參數：改屬性值控制陰影的顏色。 ```html <style> div{ width:300px; height:100px; background-color:yellow; box-shadow: 20px 10px 100px 100px #888888; } </style> </head> <body> <div></div> </body> ``` **內部陰影** `{box-shadow:inset x-offset y-offset blur-radius spread-radius color}` 對象選擇器 {text-shadow:投影方式 X軸偏移量 Y軸偏移量陰影模糊半徑陰影擴展半徑陰影顏色}