• 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、文字溢出

  • 相关阅读:
    桥接,NAT,Host Only的区别
    PHP并发IO编程之路
    Git SSH Key 生成步骤
    composer安装学习
    db file sequential read等待事件的一点研究
    多个hints 怎么写?
    再次遭遇笛卡尔积
    pl/sql 在一个程序块里打印日志输出到表格
    pl/sql 程序块里打印问题
    利用ordered hints优化SQL
  • 原文地址:https://www.cnblogs.com/moyingliang/p/5764437.html
Copyright © 2020-2023  润新知