• 8月10日CSS总结


    1、三角形光标转换

    CSS:

    .one{

          0;­­

              height: 0;

         border-top: 100px solid #000;

         border-right:100px solid transparent;

         border-left:100px solid transparent;

       }

    .one:hover{

    border-top: none;

    border-bottom: 100px solid orange;

            }

    HTML: <div class="one"></div>

    2、font-weight(字体加粗)

    语法:

    font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

    例:

      CSS: p { font-weight:bold;}

      HTML:<p>你好,美女</p>

    3、圆角效果

    语法:border-radius:[ <length> | <percentage> ]{1,4}]

    向元素添加圆角边框。

    例1:

    /* 所有角都使用半径为10px的圆角 */ 

    div{ border-radius:10px;}  

    /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 

    div{ border-radius: 5px 4px 3px 2px; 

    /*也可以分别设置每个角的垂直半径和水平半径,用斜杠隔开,第一个参数表示左上角开始顺时针的水平半径,第二个参数表示左上角开始顺时针的垂直半径*/

    div{ border-radius: 10px 20px 30px 40px  /  5px 10px 15px 20px; }

    /*圆*/

    div{ border-radius:50% }

    例2:

    CSS: .good1{

                         100px;

                         height: 100px;

                         background-color: red;

                         /*四个角为圆角*/

                         border-radius: 10px;

                  }

    HTML:<div class="good1"></div>

    4、盒子阴影

    语法:

    box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

    例1: outset { box-shadow: 5px 5px rgba(0, 0, 0, .6); }             

     /*外阴影常规效果*/

    .outset-blur{ box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6); }

    /*外阴影模糊外延效果*/

    . inset { box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset; }

      /*内阴影效果*/

    例2:

    CSS:

    .box-shadow-1{

                         100px;

                         height: 100px;

                         background-color: #cccccc;

                         margin: 10px;

                         box-shadow: 5px 5px rgba(0, 0, 0, .6);

    HTML:     <div class="box-shadow-1"></div>

    5、文字溢出

  • 相关阅读:
    SQL数据库数据优化SQL优化总结( 百万级数据库优化方案)
    三星S8相机黑画面解决
    三星Galaxy S8 刷机经验记录
    2018.12.02 Socket编程之初识Socket
    工作至今
    巧用std::shared_ptr全局对象释放单例内存
    C++标准库之迭代器
    Phone 3rd Recovery
    进电机之两相双极性步进电机仿真
    使用Pretues仿真Arduino驱动步进电机
  • 原文地址:https://www.cnblogs.com/moyingliang/p/5764437.html
Copyright © 2020-2023  润新知