文章目录
CSS——圆角边框和阴影
圆角边框
<!DOCTYPE html>
<html lang="en">
<bead>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:400px;
height:400px;
border:10px solid #00d8ff;
border-radius:400px 300px 200px 100px; 100px:左上，右下 20px:右上，左下*/
/* border-radius:400px 300px 200px 100px; /* 顺时针排序 400px:左上，300px：右上，200px：右下 100px：左下*/
}
</style>
</bead>
<body>
<div></div>
</body>
</html>
效果图
圆和半圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:400px;
height:200px;
border:10px solid #00d8ff;
/*border-radius:400px; 圆形*/
border-radius:400px 400px 0 0; /*半圆形*/
}
img{
border-radius:200px ;
}
</style>
</head>
<body>
<div></div>
<img src="images/4.jpg" alt="">
</body>
</html>
效果图
阴影
<!DOCTYPE html>
<html lang="en">
<bead>
<meta charset="UTF-8">
<title>Title</title>
<style>
#text{
width:200px;
height:200px;
border:10px solid #00d8ff;
box-shadow:10px 10px 100px red ;
margin:0 auto; /*居中*/
}
img{
box-shadow:10px 10px 100px red ;
border-radius:200px;
}
</style>
</bead>
<body>
<div style="width:1000px;height:200px;display:block; text-align:center;"> /*让图片居中*/
<img src="images/4.jpg" alt="">
</div>
<div id="text"></div>
</body>
</html>