css3边框和圆角
程序员文章站
2022-06-17 16:13:29
...
目录
*** 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教程》