圆角边框和阴影

圆角边框：

4个角

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*左上 右上 右下 左下，顺时针方向*/
 8         /*圆圈：圆角=宽度*/
 9         div{
10             width: 100px;
11             height: 100px;
12             border: 10px solid red;
13             border-radius: 50px 50px 50px 50px;
14         }
15     </style>
16 
17 
18 </head>
19 <body>
20 <div></div>
21 </body>
22 </html>
圆角边框
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         div{
 9             width: 100px;
10             height: 100px;
11             border: 10px solid red;
12             border-radius: 100px 0px 0px 0px;
13         }
14         img{
15             border-radius: 200px;
16         }
17     </style>
18 </head>
19 <body>
20 <div></div>
21 <img src="1.png" alt="">
22 </body>
23 </html>
圆形
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 <!--    盒子阴影-->
 8     <style>
 9         div{
10             width: 100px;
11             height: 100px;
12             background: #3cbda6;
13             /*border: 10px solid red;*/
14             margin: 0 auto;
15 
16         }
17         img{
18             box-shadow: 10px 10px 10px yellow;
19 
20         }
21 
22     </style>
23 </head>
24 <body>
25 
26 <div>
27     <img src="1.png" alt="">
28 </div>
29 </body>
30 </html>
阴影

 

posted @ 2022-03-28 22:05  doremi429  阅读(17)  评论(0)  编辑  收藏  举报