Skip to main content

新的UI方案

新增属性

  • box-shadow 盒阴影

    • 关键字(内 外阴影)
    • length(x轴的偏移量)
    • length(y轴的偏移量)
    • length(模糊程度)
    • length(阴影面积)
    • color(阴影颜色)
  • text-shadow 文字阴影

    • length(x轴的偏移量)
    • length(y轴的偏移量)
    • length(模糊程度)
    • color(阴影颜色)
  • filter 属性定义元素的视觉效果(如模糊和饱和度)

    • blur(px) 对图像应用模糊效果。较大的值将产生更多的模糊。
    • brightness(%) 使用百分比值(例如 75%)的滤镜,也接受该值是十进制(例如 0.75)
  • text-stroke 文字描边

    • webkit-text-stroke:4px pink
  • text-overflow 超出省略号

    • ellipsis
  • box-reflect 倒影

    • -webkit-box-reflect:below
  • resize 属性规定是否可由用户调整元素的尺寸。

    • none 用户无法调整元素的尺寸。
    • both 用户可调整元素的高度和宽度。
    • horizontal 用户可调整元素的宽度。
    • vertical 用户可调整元素的高度。
  • box-sizing 定义盒模型

    • content-box 标准盒模型,宽度包括内边距和边框
    • border-box 怪异合模型,宽度不包括内边距和框架,方便计算
  • background背景

    • background-size 规定背景图像的尺寸。
    • background-position 控制背景图片在背景区域中的位置
    • background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
    • background-origin 属性规定 background-position 属性相对于什么位置来定位
    • background-clip 属性规定背景的绘制区域。