CSS3 边框-95知识库

CSS3 边框

更新时间：2020-05-14 22:38

用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。

在本章中，您将了解以下的边框属性：

border-radius

box-shadow

border-image

CSS3 圆角

在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。在 CSS3 中，很容易创建圆角。在 CSS3 中 border-radius 属性被用于创建圆角：

在div中添加圆角元素实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>95知识库(995w.com)</title> 
<style> 
div
{
	border:2px solid #a1a1a1;
	padding:10px 40px; 
	background:#dddddd;
	width:300px;
	border-radius:25px;
}
</style>
</head>
<body>

<div>border-radius 属性允许您为元素添加圆角边框！ </div>

</body>
</html>

尝试一下>>

CSS3 盒阴影

CSS3 中的 box-shadow 属性被用来添加阴影:

在div中添加box-shadow属性实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>95知识库(995w.com)</title> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:blue;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

尝试一下>>

图像创建一个边框

有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框：border-image 属性允许你指定一个图片作为边框！用于创建上文边框的原始图像：

在 div 中使用图片创建边框:

Border

图像边框border-image 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>95知识库(995w.com)</title>
<style> 
#borderimg1 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(/upload/image/20200514/6372509339364912501495962.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(/upload/image/20200514/6372509339364912501495962.png) 30 round; /* Opera 11-12.1 */
    border-image: url(/upload/image/20200514/6372509339364912501495962.png) 30 round;
}

#borderimg2 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(/upload/image/20200514/6372509339364912501495962.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(/upload/image/20200514/6372509339364912501495962.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(/upload/image/20200514/6372509339364912501495962.png) 30 stretch;
}
</style>
</head>
<body>

<p>border-image 属性用于指定一个元素的边框图像。</p>
<p id="borderimg1">在这里，图像平铺（重复），以填补该地区。</p>
<p id="borderimg2">在这里，图像被拉伸以填补该地区</p>

<p>这是原始图片:</p><img src="/upload/image/20200514/6372509339364912501495962.png">
<p><b>注意:</b> Internet Explorer 10 及更早的版本不支持 border-image 属性。</p>
</body>
</html>

尝试一下>>