视频标签、圆角、阴影、外边距

（一）视频标签

  • 两种路径：1.相对路径 2.在线路径
  • autoplay="autoplay" 自动播放属性 按的键盘上的F5去刷新
  • controls="controls" 控制器
  • loop="loop" 无限循环播放

（二）圆角

css属性样式：border-radius:;

  • 值：两个值:第一个代表左上和右下、第二个右上和左下
  • 三个值:第一个代表左上、第二个右上和左下、第三个代表右下
  • 四个值:第一个左上、第二个右上、第三个右下、第四个左下
  • 值的写法，第一种写px、第二种写%
  • 让一个元素变成圆形，前提宽高相等，border-radius：50%;
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             div{
 8                 width: 200px;
 9                 height: 200px;
10                 background: red;
11                 border-radius:10px 50px 100px 80px;
12             }
13         </style>
14     </head>
15     <body>
16         <div></div>
17     </body>
18 </html>
border-radius

（三）阴影

box-shadow:;

第一个值水平方向上的、第二个值竖直方向、第三个值模糊程度、小于0 阴影消失、第四个值颜色

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             div{
 8                 width: 100px;
 9                 height: 30px;
10                 text-align: center;
11                 line-height: 30px;
12                 background: skyblue;
13                 color:white;
14                 /*box-shadow  盒子的阴影*/
15                 /*第一个值水平方向上的、第二个值竖直方向、第三个值模糊程度、小于0 阴影消失、第四个值颜色*/
16             }
17             div:hover{
18                 box-shadow: 10px 10px 8px black;
19             }
20         </style>
21     </head>
22     <body>
23         <div>
24             搜索一下
25         </div>
26     </body>
27 </html>
box-shadow

（四）外边距

margin、margin-top、margin-bottom、margin-left、margin-right

margin:;

　　一个值：所有边距；

　　两个值：第一个值指margin-top、margin-bottom第二个值指margin-left、margin-right；

　　三个值：第一个值指margin-top、第二个值margin-right和margin-left、第三个值margin-bottom；

　　四个值：第一个值margin-top、第二个值margin-right、第三个值margin-bottom、第三个值margin-left；

 

posted @ 2019-07-12 23:02  xiaochen-cmd  阅读(539)  评论(0)  编辑  收藏  举报