CSS3 边框效果详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Allisa_yan/article/details/88978619

本文主要介绍了CSS3中的三种重要特性：圆角、盒阴影和边界图片。通过使用CSS3，开发者可以实现更加丰富和精致的网页元素样式。圆角属性允许创建无角的元素，盒阴影为元素添加立体感，而边界图片则提供了自定义边框的可能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

* css3 圆角 *

// 顺时针（从左上角开始）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border</title>
<style type="text/css">
div {
	width: 800px;
	height: 300px;
	border: 5px solid red;
	margin: 0 auto;
	border-radius: 50px; /*50%-椭圆（如果宽高相同，则为圆）、5em、5vw*/
    border-radius:30px 50px 70px 100px;
    border-radius:30px 50px 70px;
    border-radius:30px 50px;

    -webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	    -ms-border-radius: 50%;
	     -o-border-radius: 50%;
	        border-radius: 50%;  /*如果浏览器能够直接识别最后这个，则不会识别之前的浏览器设置*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>

* css3 盒阴影 *

h-shadow：水平方向的偏移量； // 必写，允许负值

v-shadow：竖直方向的偏移量； // 必写，允许负值

blur：模糊度； // 可选

spread：扩展度； // 阴影四周扩展多少像素 // 可选

color：阴影颜色； // 可选

inset：向内；（不添加就是向外） // 可选

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BoxShadow</title>
<style type="text/css">
div {
	width: 800px;
	height: 300px;
	background: red;
	margin: 0 auto;
	box-shadow: 50px 30px 0px 0px yellow;
}
</style>
</head>
<body>
<div>大家好！</div>
</body>
</html>

* css3 边界图片 *

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border Image</title>
<style type="text/css">
div {
	width: 853px;
	height: 392px;
	border-image-source: url("border.jpg"); /*图片来源*/
	border-image-slice: 50%;
	border-image-width: 50%;
	border-image-outset: 2;
	border-image-repeat: repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

详细参考《border-image教程》