HTML5与CSS3基础教程-第14章 使用CSS3进行增强

《HTML5与CSS3基础教程（第8版）》 第14章读书笔记

• 2020/04/02

• 渐进增强： 网站在不同的Web浏览器中的外观和行为不一样是完全可以接受的，只要内容是可以访问的即可。（p279）

• 为不支持某些属性的浏览器使用polyfill： 想要在旧的浏览器中实现新版浏览器中的外观，可以使用polyfill（垫片），通常使用JS实现，但可能会对性能产生一定的影响。（p279 - 280）

  常见的polyfill：CSS3 PIE

• CSS厂商前缀： 在包含某个特效的初始阶段，浏览器通常会使用厂商前缀实现这类特性。（p280 - 281）

  前缀	浏览器版本
  -webkit-	Webkit/Safari/旧版本Chrome
  -moz-	Firefox
  -ms-	IE
  -o-	Opera

  使用该类属性时，通常将无前缀属性放置在最后，保证较高的优先级。

• 圆角： （p281 - 284）

  • 椭圆形圆角： -webkit-border-radius或border-radius属性，值为x/y。其中x为圆角在水平方向的半径大小，y是垂直方向的。

  • 圆角元素的背景： 在使用圆角时使用背景，若背景的范围包含border，背景会透过圆角，为了避免这种情况，往往会加一条background-clip: padding-box。

• 文本阴影： （p284 - 285）

  • 语法： text-shadow: x-offset y-offset blur-radius color; x-offset和y-offset分别为水平和垂直方向上的偏移量（右/下为正）。blur-radius可选，为模糊半径，默认值为0。
  • 可以使用逗号分隔，来设置多个阴影样式。
  • blur-radius必须为正整数。
  • text-shadow是继承的。

• 元素阴影： （p285 - 288）

  • 语法： box-shadow: x-offset y-offset blur-radius inset spread color; x-offset, y-offset, blur-radius和color属性同text-shadow，inset 代表阴影方向，spread代表阴影大小，负值代表小于元素大小。
  • 有带有-webkit-前缀的属性。
  • 可以使用逗号分隔，来设置多个阴影样式。

• 多重背景： （p288 - 290）

  通过用逗号分隔background-image, background-position, background-repeat，设置多个值来设置多重背景。也可以使用background简写。

• 渐变背景： （p290 - 295）

  • 线性渐变： linear-gradient(pos, color1, color2[, color3...]); pos是渐变结束的方向，可以是to top, to bottom, to right, to left, to top right...，也可以用方向（90deg，180deg等）。
  • 径向渐变： radial-gradient()，见p293。
  • 可以使用逗号分隔多个渐变效果，组成有趣的效果。

  相关网站：

  CSS3 Patterns Gallery：各种神奇的渐变效果。

  Ultimate CSS Gradient Generator：渐变效果编辑器。

• 元素的不透明度： （p295 - 297）

  • opacity属性设置不透明度，两位小数，不带单位。

  • IE滤镜：

    如：设置50%的透明度。

    div{
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opcity=50);
        filter:alpha(opacity=50)
    }
    

  • 不继承。