CSS3 邊框

CSS3 邊框

#用CSS3，你可以建立圓角邊框，加入陰影框

在本章中，您將了解以下的邊框屬性

##border- image設定所有邊框圖像的速記屬性。 3border-radius一個用來設定所有四個邊框- *-半徑屬性的速記屬性 3box-shadow附加一個或多個下拉方塊的陰影3

#屬性	說明	CSS

CSS3 圓角

在CSS2中加入圓角棘手。我們不得不在每個角落使用不同的圖像。

在CSS3中，很容易建立圓角。

在CSS3中border-radius屬性被用來建立圓角：

#實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            border:2px solid #4269e1;
            padding:10px 40px;
            background: #d8dd2e;
            width:150px;
            border-radius:25px;
        }
    </style>
</head>
<body>
<div>圆角边框！</div>
</body>
</html>

運行程式嘗試

CSS3盒子陰影

CSS3中的box-shadow屬性被用來新增陰影:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:300px;
            height:100px;
            background-color:yellow;
            box-shadow: 10px 10px 5px #47d1b1;
            text-align: center;
            
        }
    </style>
</head>
<body>
<div>CSS3盒阴影</div>
</body>
</html>

執行程式嘗試一下

CSS3邊界圖片

有了CSS3的border-image屬性，你可以使用映像建立一個邊框：

border-image屬性允許你指定一個圖片作為邊框！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文网（php.cn)</title>
    <style>
        div
        {
            border:15px solid transparent;
            width:250px;
            padding:10px 20px;
        }
        #round
        {
            -webkit-border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 round; /* Safari 5 and older */
            -o-border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 round; /* Opera */
            border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 round;
        }
        #stretch
        {
            -webkit-border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch; /* Safari 5 and older */
            -o-border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch; /* Opera */
            border-image:url(/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch;
        }
    </style>
</head>
<body>
<p> border-image 属性用于设置图片的边框。</p>
<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>
<p>这是我们使用的图片素材：</p>
<img src="http://www.runoob.com/images/border.png" />
</body>
</html>

執行程式嘗試

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文网（php.cn)</title> <style> div { border:15px solid transparent; width:250px; padding:10px 20px; } #round { -webkit-border-image:url(https://img.php.cn/upload/course/000/000/006/58a4feb498981164.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(https://img.php.cn/upload/course/000/000/006/58a4feb498981164.png) 30 30 round; /* Opera */ border-image:url(https://img.php.cn/upload/course/000/000/006/58a4feb498981164.png) 30 30 round; } #stretch { -webkit-border-image:url(https://img.php.cn/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch; /* Safari 5 and older */ -o-border-image:url(https://img.php.cn/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch; /* Opera */ border-image:url(https://img.php.cn/upload/course/000/000/006/58a4feb498981164.png) 30 30 stretch; } </style> </head> <body> <p> border-image 属性用于设置图片的边框。</p> <div id="round">这里，图像平铺（重复）来填充该区域。</div> <br> <div id="stretch">这里，图像被拉伸以填充该区域。</div> <p>这是我们使用的图片素材：</p> <img src="https://img.php.cn/upload/course/000/000/006/58a4feb498981164.png" /> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear