zoukankan      html  css  js  c++  java
  • 视频标签、圆角、阴影、外边距

    (一)视频标签

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

  • 相关阅读:
    Laravel自定义分页样式
    mysql中 key 、primary key 、unique key 和 index 有什么不同
    PHP RSA公私钥的理解和示例说明
    PHP操作Excel – PHPExcel 基本用法
    Yii 1.1 常规框架部署和配置
    阿里云服务器 Ubuntu 安装 LNMP
    全国地区sql表
    十道海量数据处理面试题与十个方法大总结
    Hibernate中对象的三种状态以及Session类中saveOrUpdate方法与merge方法的区别
    乐观锁与悲观锁——解决并发问题
  • 原文地址:https://www.cnblogs.com/xiaochen-cmd-97/p/11178884.html
Copyright © 2011-2022 走看看