CSS3 邊框

`border-radius`

在 CSS3 中，border-radius屬性用於建立圓角。html

語法

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>

效果以下： spa

`box-shadow`

在 CSS3 中，box-shadow屬性用來添加陰影。code

語法

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>

效果以下： htm

`border-image`

在 CSS3 中，border-image屬性容許指定一個圖片做爲邊框。blog

原文出處：https://www.cnblogs.com/zhuangshq/p/10144805.html圖片