zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    [编程题] 数组中重复的数字
    [编程题] 用两个栈实现队列
    杜教筛学习笔记
    二次剩余学习小记
    Burnside引理和Polya定理简单入门
    6553. 【GDOI2020模拟4.11】人生
    6545. 【GDOI2020模拟4.8】 Exercise
    2020.4.5学军信友队趣味网络邀请赛总结
    51 Nod 1287 加农炮(单调队列思想+二分)
    51 Nod 1070 Bash游戏v4(斐波那契博弈)
  • 原文地址:https://www.cnblogs.com/cw_volcano/p/2469916.html
Copyright © 2011-2022 走看看