CSS杂记

选择器

• +相邻选择器,选择所符合条件的兄都元素，而不是选择both
• 多选择器，,号隔开，多用在整体样式规划
• 子类选择器，只能选择子类，不可选取孙类
• 后代选择器，选择子孙类
• 属性选择器

  input[id=ipt2]{}
  [title~=flower]   // 属性中包含flower
  div[class^="test"] // 属性以test开头
  div[class$="test"] // 属性以test结尾
  

伪类和伪元素

• 伪类
  • a标签为例执行顺序（lvha）,link,visited,hover,active
    • 取消a标签的下划线是 text-decoration: none;

自定义li圆点样式

• 通过伪元素前置定义

.diotli::before{
            content: "\2022";     // unicode编码
            color: #8B4513;      
            font-size: 40px;         
        }

css三角形

.d4{
            width: 0; 
            height: 0;
            border-width: 30px;
            border-style: solid;
            border-color: transparent #D2B48C transparent transparent;       // 通过透明三个
        }

box缺角的俩种方式

• ::befor, :after

  .radius::before{
        border-bottom-right-radius: 12px;
        background: white;
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
    }
    .radius::after{
        border-bottom-left-radius: 12px;
        background: white;
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
    }
  

• box-shaow

  • box-shadow:inset x-offset y-offset blur-radius spread-radius color

  • box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径(阴影颜色的宽度) 阴影颜色

  • 阴影类型
    　　此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影

  • X-offset
    　　是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；

  • Y-offset
    　　是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部

  • 阴影模糊半径：
    　　此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

  • 阴影扩展半径
    　　此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。

  • 阴影颜色
    　　此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。