CSS3 邊框 在 CSS3 中， 屬性用於創建圓角。 語法 |值|描述| | | | |length|設置拐角的半徑。| |%|使用百分比定義拐角的半徑。| 效果如下： 在 CSS3 中， 屬性用來添加陰影。 語法 |值|說明| | | | | |必需，表示水平陰影相對於元素的偏移位置。當 大於0 ...
CSS3 邊框
border-radius
在 CSS3 中，border-radius屬性用於創建圓角。
語法
border-radius: 1-4 length|% / 1-4 length|%;
/* 1-4表示至少一個至多4個 */
/* 1-4分別表示左上角、右上角、右下角和左下角。簡單記為順時針 */
/* 省略某個角時，它會與對角保持一致 */
/* 如 */
border-radius: 10px 5px;
/* 相當於 */
border-radius: 10px 5px 10px 5px;
border-radius: 10px 5px 15px;
/* 相當於 */
border-radius: 10px 5px 15px 5px;| 值 | 描述 |
|---|---|
| length | 設置拐角的半徑。 |
| % | 使用百分比定義拐角的半徑。 |
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border: 2px solid;
border-radius: 25px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果如下：
box-shadow
在 CSS3 中，box-shadow屬性用來添加陰影。
語法
box-shadow: h-shadow v-shadow blur spread color inset;| 值 | 說明 |
|---|---|
h-shadow |
必需，表示水平陰影相對於元素的偏移位置。當h-shadow大於0時，表示向右偏移，小於0時，向左偏移，等於零時，剛好與元素重合。 |
v-shadow |
必需，表示垂直陰影相對於元素的偏移位置。當v-shadow大於0時，表示向下偏移，小於0時，向上偏移，等於零時，剛好與元素重合。 |
blur |
可選，模糊距離，有點類似於羽化，小於0時就不顯示了，等於0時沒有模糊效果。 |
spread |
可選，陰影的大小，陰影的面積，大於0時陰影面積大於元素麵積，小於0時陰影面積小於元素麵積。 |
color |
可選，陰影的顏色。 |
inset |
可選，設置inset時，陰影變成內陰影。 |
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
box-shadow: 10px 10px 5px #888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果如下：
border-image
在 CSS3 中，border-image屬性允許指定一個圖片作為邊框。
