效果一、圓角效果?border-radius

實心上半圓：

方法：把高度(height)設為寬度（width）的一半，并且只設置左上角和右上角的半徑與元素的高度一致（大于也是可以的）。

div {height:50px;/*是width的一半*/width:100px;background:#9da;border-radius:50px 50px 0 0;/*半徑至少設置為height的值*/ }

實心圓：
方法：把寬度（width）與高度(height)值設置為一致（也就是正方形），并且四個圓角值都設置為它們值的一半。如下代碼：

div {height:100px;/*與width設置一致*/width:100px;background:#9da;border-radius:50px;/*四個圓角值都設置為寬度或高度值的一半*/ }

效果二、陰影 box-shadow

box-shadow是向盒子添加陰影，可以添加一個或者多個，具體的語法為：

box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑][陰影擴展半徑][陰影顏色][投影方式]

其中

X軸偏移量：必需，水平陰影的位置。允許負值

Y軸便宜量：必需，垂直陰影的位置。允許負值

陰影模糊半徑：可選，模糊距離，其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊

陰影擴展半徑：可選，陰影的尺寸，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小；

陰影顏色：可選，省略默認為黑色

投影方式：可選，省略為外陰影方式，設置inset為內部陰影方式

效果三、邊框圖片border-image

根據border-image的語法，如圖

其中：repeat就是一直重復，然后超出部分剪裁掉，而且是居中開始重復

? ? ? ? ? ?round可以理解為圓滿的鋪滿，圖片不會被裁剪，為了實現圓滿所以會壓縮（或拉伸）

? ? ? ? ? ?stretch就是拉伸，有多長拉多長，讓圖片拉伸成對應邊框的長度

注意：Chrome下，中間部分也會被拉伸，webkit瀏覽器對于round屬性和repeat屬性似乎沒有區分，顯示效果是一樣的。

?

?

?

?

總結

以上是生活随笔為你收集整理的CSS3笔记之基础篇（一）边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。