《CSS样式》二三章知识点总结

CSS揭秘

处理兼容性问题：先发制人地加上所有可能的浏览器前缀，再把无前缀的版本放在最后（失败）

css编码技巧

1. DRY: don’t repeat yourself 减少代码重复
2. WET：we enjoy typing/write everything twice

总结

• 巧用em、rem、px
• 避免一些不必要的媒体查询@media：（未来每次对 CSS 代码的修改都要求我们逐一核对这些媒体查询是否需要配合修改，甚至可能要求我们反过来修改这些媒体查询的设置。这一点常常被我们忽略，后患无穷。你添加的媒体查询越多，你的 CSS代码就会变得越来越经不起折腾）
• 合理使用简写属性（background/background-color)

背景和边框

• 背景和边框

  1. hsla(颜色，饱和度，亮度，透明度)

     hue - 色相: 定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色

     saturation - 饱和度: 定义饱和度; 0% 为灰色， 100% 全色

     lightness - 亮度: 定义亮度 0% 为暗, 50% 为普通, 100% 为白

     alpha - 透明度: 定义透明度 0（透完全明） ~ 1（完全不透明）

  2. 线性渐变：background: linear-gradient(定义渐变效果的起点和方向（或角度）, color-stop1, color-stop2, …);

  • 半透明边框：默认情况下，背景会延伸到边框所在的区域下层。
  1. background-clip: 设置元素的背景（背景图片或颜色）是否延伸到边框(border-box)、内边距盒子(padding-box)、内容盒子下面(content-box)。
  • 多重边框

  1. 利用box-shadow可以创建任意数量的投影（即边框），但注意投影是不占用元素布局的，并不 会响应鼠标事件，比如悬停或点击。只能创建实线边框

     box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6)

  2. 利用outline实现双重边框（只能实现双重），产生虚线边框

     border: 10px solid #655;
outline: 5px solid deeppink;

  • 灵活的背景定位（对背景图片做偏移定位）
  1. background-position: right 10px bottom 20px 指背景位置距离右边10px，距离底部20px。
  2. background-origin：当偏移量与容器的内边距一致时，值修改为content-box；默认情况下是padding-box（background-origin 属性规定 background-position 属性相对于什么位置来定位）。
  • 边框内圆角
  1. 利用outline和box-shadow组合实现内圆角（前提：描边不跟着圆角走），目前好像描边会跟着圆角走，舍弃）
  2. 两个div原始方法
  3. 伪元素
  • 条纹背景

  1. 横向条纹背景：

     background: linear-gradient(#fb3 50%,#58a 50%) 实现双条纹，高度一样

     background: linear-gradient(#fb3 30%,#58a 30%) 实现双条纹，高度不一样

     background-size:100% 30px 实现单个条纹高15px，且能实现重复条纹

  2. 垂直条纹背景

     background: linear-gradient(#fb3 30%, #58a 30%)
background-size: 100% 30px

  3. 斜向条纹背景

     45°的条纹：
     background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0)
background-size: 30px 30px;

     任意角度: repeating-linear-gradient适用于斜向条纹
     background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);（注：作者写书时，这种语法浏览器还不支持，现在这种语法更DRY）

  4. 同色系条纹

     原理：把同色系深色作为背景色，半透明白色的条纹叠加在背景色之上来得到浅色条纹

     应用：进度条

  • 复杂的背景图案（当实现图案的代码过于复杂时，考虑SVG)

  1. 网格：原理：利用background-image:linear-gradient()支持分隔叠加的属性方式
     background**: #58a;
background-image**: linear-gradient(white 1px, transparent 0), linear-gradient(90deg, white 1px, transparent 0);
background-size**: 30px 30px;

  2. 波点：原理：利用background-image: radial-gradient(斑点颜色 30%, transparent 0);

  3. 棋盘：
     （1）利用SVG生成棋盘
     <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" **>
<rect x="50" width="50" height="50" />
<rect y="50" width="50" height="50" />
</svg>

     （2）圆锥渐变生成棋盘
     background**: repeating-conic-gradient(#bbb 0, #bbb 25%, #eee 0, #eee 50%)
background**: conic-gradient(#bbb 0 90deg, #fff 90deg 180deg, #bbb 180deg 270deg, #fff 270deg 360deg)

  • 伪随机背景（利用相对质数来模拟随机数的真实性）
    background: hsl(20, 40%, 90%);
    background-image: linear-gradient(90deg, #fb3 11px, transparent 0), linear-gradient(90deg, #ab4 23px, transparent 0), linear-gradient(90deg, #655 41px, transparent 0);
    background-size: 41px 100%, 61px 100%, 83px 100%;

  • 连续的图像边框

  1. 背景图片边框：原理：在背景图片之上，再叠加一层纯色的背景；为了让底层背景透过边框区域显示出来，需要给两个背景加上background-clip；纯色背景利用同色渐变获得

     padding: 1em;
*border: 1em solid transparent;
background: linear-gradient(white, white), url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;

  2. 条纹边框：可以通过控制border的粗细来控制边框的形状（斜边框、横边框）；控制bg-size来控制边框之间的间隙、长短

     padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;

形状

• 形状

  • 自适应的椭圆（原理: 利用 border-radius: 50% 实现）

    1. 半椭圆：利用border-radius可以使用/分隔开水平和垂直方向上的圆角值特性来分别设置不同方式上的圆角半径

       例：上半椭圆：border-radius: 50% 50% 0 0 / 100% 100% 0 0;

    2. 四分之一椭圆：利用border-radius只设置一个角的圆弧

  • 平行四边形

    1. 原理：伪元素+transform:skew(-45deg) 变形；宿主元素设置绝对定位，伪元素设置相对定位且z-idnex小于宿主元素的
    2. 菱形：伪元素；正方形的基础上，transform: rotate(45deg)

  • 菱形图片

    1. 原理：嵌套元素，内外反向rotate，内部图片宽度与对角线平齐。缺点：只适用于正方形的背景，若是长方形就会变形
       transform: rotate(-45deg) scale(1.42);

    2. 利用clip-path裁切路径属性，设置其值为polygon()多边形来实现
       clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

       参考文章

  • 切角效果

    1. 元素切角：原理：利用渐变（透明到实色）实现角度，利用background-size控制多个渐变互不影响实现多个切角。
       background: #58a;
background: linear-gradient(135deg, transparent 15px, #58a 0) top left, linear-gradient(-135deg, transparent 15px, #58a 0) top right, linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

    2. 弧形切角（内凹圆角）：原理：利用径向渐变实现，多圆角实现效果同 元素切角
       background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, radial-gradient(circle at top right, transparent 15px, #58a 0) top right, radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left

    3. border-image实现切角：原理：border-image+内联SVG 实现切角边框，切角的斜度由border来控制，background-clip避免背景色蔓延到边框—————这个实现效果较前两种比较好

    4. 裁切路径：原理：利用clip-path: polygon()裁剪出我们需要的形状。缺点：局限兼容性不好，裁切会忽略内部文本内容。优点：可裁切任意内容，不受背景图限制。

  • 梯形标签页：原理：利用 伪元素+transform: perspective() rotateX();
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
transform-origin: bottom;

  • 简单的饼图

    1. 原理：伪元素遮盖旋转
    2. SVG
    3. 角向渐变：background: conic-gradient(#655 40%, yellowgreen 0);