您的位置：首页 > Web前端 > CSS

Css3中边框的处理

2016-07-28 22:55 260 查看

Css3的边框属性

Css3的圆角边框

<!DOCTYPE
html>
<html>
<head>
<style>

div
{
text-align:center;
border:2px solid #a1a1a1;
padding:20px 50px;

background:blue;
width:350px;
border-radius:25px;
-moz-border-radius:25px;
/* 老的 Firefox */
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>

Css3边框阴影

<!DOCTYPE
html>
<html>
<head>
<style>

div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow:
10px 10px 5px #888888;
/* 老的 Firefox */
box-shadow:
10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Css3图片边框

<!DOCTYPE
html>
<html>
<head>
<style>

div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
#round
{
-moz-border-image:url(/i/border.png) 30 30 round;
/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;
/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;
/* Opera */
border-image:url(/i/border.png) 30 30 round;
}
#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch;
/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;
/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;
/* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div
id="round">在这里，图片铺满整个边框。</div>
<br>
<div
id="stretch">在这里，图片被拉伸以填充该区域。</div>
<p>这是我们使用的图片：</p>
<img
src="/i/border.png">
<p><b>注释：</b>
Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航