CSS3 ???
CSS3 ???
CSS3? ???? ?? ???? ??? ??? ??? ??? ? ????.
? ???? ?? ??? ??? ?? ?????.
| ?? | ?? | CSS |
|---|---|---|
| border-image | ?? ??? ???? ?? ?? ??? ?????. | 33 |
| CSS3 ?? ??? | ||
| CSS2? ?? ???? ???? ?? ??????. ??? ?????? ?? ???? ???? ????. | CSS3??? ?? ???? ?? ?? ? ????. | border-radius ??? CSS3?? ?? ???? ??? ? ?????. |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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 box-shadow
-??? CSS3? ??? ???? ???? ? ???????: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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中文網(wǎng)（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 屬性用于設(shè)置圖片的邊框。</p>
<div id="round">這里，圖像平鋪（重復(fù)）來填充該區(qū)域。</div>
<br>
<div id="stretch">這里，圖像被拉伸以填充該區(qū)域。</div>
<p>這是我們使用的圖片素材：</p>
<img src="http://www.runoob.com/images/border.png" />
</body>
</html>????? ???? ??? ???
