Day05 CSS 补充

1.下拉菜单

CSS

HTML

  收藏夹
  

    收藏宝贝
    收藏店铺
  

卖家中心
联系克服

效果如下：

下拉菜单

2.border-radius

 div{
      width: 200px;
      height: 40px;
      background: pink;
      /*border-radius 一个参数则是4个角都变化
      4个参数的话4个参数分别是四个角从左上角开始顺时针*/
      border-radius:20px 20px 0 0;
    }

3.box-shadow

 div{
      width: 100px;
      height: 100px;
      background: red;
      margin: 100px;
      /*box-shadow 阴影
      参数1：水平偏移的位置
      参数2：垂直偏移的位置
      参数3：高斯模糊
      参数4：阴影尺寸
      参数5：颜色
      inset 内阴影*/
      box-shadow: 0px 10px 10px 2px #44cef6 inset;
    }

4.text-shadow

  p{
      /*文字阴影
      参数1：水平偏移
      参数2：垂直偏移
      参数3：高斯模糊
      参数4：颜色*/
      text-shadow: 10px 10px 15px red;
    }

5.文本省略

  p{
      text-overflow:ellipsis;
      overflow: hidden;
      /*white-space 文本是否换行
      nowrap 不换行*/
      white-space: nowrap;
    }

6.transform

 /*旋转
    transform:rotate(度数)

    偏移
    translate(x,y)
    translateX 水平偏移
    translateY 垂直偏移
    缩放
    scaleX()水平缩放
    scaleY()垂直缩放
    scale(x,y)
    scale()整体缩放
    倾斜
    skew(度数)
    skewX
    skewY
    */

    div{
      width: 100px;
      height: 100px;
      background: red;
    }
    div:hover{
      /*transform:rotate(45deg);*/
      /*transform: translate(100px 100px);*/
      /*transform:scale(0.5);*/
      transform:skew(30deg);
    }

7.垂直居中新方法

8.transition过渡

• 例子
  CSS

HTML

9.animation

• 引用animate.css

10.checkbox美化

CSS

HTML

  
  请勾选

11.not选择器

CSS

HTML

1
2
3
4

效果如下：

not选择器