CSS3 边框

CSS3 边框样式,如圆角、阴影等

在 CSS3 中,border-radius 属性用于创建圆角:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <style>
        div {
            width:300px;
            height:300px;
            border:red 2px solid;
            border-radius: 25px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
Code language: HTML, XML (xml)

阴影

box-shadow: 10px 10px 5px #888888;
Code language: CSS (css)

边框使用图片

<style>
div {
    width: 300px;
    height: 300px;
    border: red 2px solid;
    border-radius: 25px;
    box-shadow: 10px 10px 5px #888888;
    border-image: url(/border.png) 30 30 round;
    -webkit-border-image: url(/border.png) 30 30 round; /* Safari 5 及更早版本 */
    -o-border-image: url(/border.png) 30 30 round; /* Opera */
}
</style>
Code language: HTML, XML (xml)
Next:

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注