zoukankan      html  css  js  c++  java
  • 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、文字溢出

  • 相关阅读:
    设置QtCreator多核编译
    ZeroMQ研究与应用分析及学习资料
    彻底卸载Visual Studio 2013、Visual Studio 2015
    delphi 动态设置和访问cxgrid列的Properties
    delphi 拷贝文件时有进度显示
    Delphi 连接mysql的功能,去除乱码, 需要设置字符集
    cxGrid1 的使用方法
    Django day12 分页器
    Django day11(一) ajax 文件上传 提交json格式数据
    Django day08 多表操作 (五) 常用和非常用用字段
  • 原文地址:https://www.cnblogs.com/moyingliang/p/5764437.html
Copyright © 2011-2022 走看看