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

(一)视频标签

  • 两种路径: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;

原文地址:https://www.cnblogs.com/xiaochen-cmd-97/p/11178884.html