• The Basics of CSS3


    RGBA

    The first three values are RGB color values and the last value is the level of the transparency (0 = transparent and 1 = opaque).

    RGBA

    RBGA can be applied to any properties associated with color such as font color, border color, background color, shadow color, etc.

    RGBA 2

    Text Shadow

    Text shadow is structured in the following order: x-offset, y-offset, blur, and color;

    screenshot

    Set a negative value for x-offset to shift the shadow to the left. Set a negative value for y-offset to shift the shadow to the top. Don't forget you can use RGBA values for the shadow color.

    text shadow 2

    You can also specify a list of text-shadow (separated by a comma). The following example uses two text-shadow declarations to make a letter press effect (1px top and 1px bottom).

    text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

    text shadow 3

    Border Radius

    The shorthand for border radius is similar to the padding and margin property (eg.border-radius: 20px). In order for the browsers to render the border radius, add "-webkit-" in font of the property name for webkit browsers and "-moz-" for Firefox.

    border radius

    You can specify each corner with a different value. Note Firefox and Webkit has different property names for the corners.

    border radius

    Box Shadow

    The structure for box shadow is same as the text-shadow property: x-offset, y-offset, blur, and color.

    box shadow

    Again, you can apply more than one box shadow. The following example is a list of three box shadow declarations.

    -moz-box-shadow: 
    -2px -2px 0 #fff, 
    2px 2px 0 #bb9595, 
    2px 4px 15px rgba(0, 0, 0, .3);

    box shadow 2

  • 相关阅读:
    常用网址
    设备像素比devicePixelRatio简单介绍
    VR虚拟红包的技术实现
    jQuery重置表单
    jQuery,遍历表格每个单元格数据。
    java 23种设计模式 链接集锦
    webstorm创建nodejs + express + jade 的web 项目
    类与类之间的几种关系
    JS 中的事件绑定、事件监听、事件委托是什么?
    简单的JavaScript图像延迟加载库Echo.js
  • 原文地址:https://www.cnblogs.com/cw_volcano/p/2469916.html
Copyright © 2020-2023  润新知