柳暗花明笔记

    CSS3 基础知识之text-shadow, box-shadow, and border-radius.

    所属分类:[ php&web ] 猫哲学家 发表于:2012-07-31 22:54 浏览:362

    RGBA

    前三个数值是 RGB 颜色的值, 最后一个数值指代的是元素的透明度 (0 表示透明, 1 表示不透明) RGBA RGBA 可以应用到所有与颜色相关的属性中. 例如: 文字颜色, 边框颜色, 背景颜色, 阴影颜色, 等等. RGBA 2

    文本阴影

    文本阴影由下列顺序的参数构成: x-offset, y-offset, blur, and color. screenshot 将 x-offset 设置为负数即将阴影移动到左侧. 将 y-offset 设置为负数即将阴影移动到上方. 请不要忘记你可以使用 RGBA 来控制阴影的颜色. text shadow 2 同时你还可以为 text-shadow 指定一个阴影列表 (以逗号分隔). 下列例子使用了两个 text-shadow 定义来控制页面输出效果 (1px 上阴影和 1px 的下阴影).

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

    text shadow 3

    圆角

    圆角的定义方式与 padding 和 margin 属性类似 (如: border-radius: 20px). 便于浏览器渲染圆角, 为 webkit 添加 "-webkit-", 为 Firefox 添加 "-moz-". border radius 你可以为每个角设定不同的值. 请注意 Firfox 和 webkit 对圆角属性的不同命名方式. border radius

    Box 阴影

    构成 Box 阴影的参数序列与 text-shadow 属性相同: x-offset, y-offset, blur, and color. box shadow 再一次说明一下, 你可以应用一个或多个 Box 阴影. 下列例子定义了三个 Box 阴影.

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

    box shadow 2


    上一编文章 气质的培养 下一编文章 ubuntu 更新到 firefox 4.0 方法
    最近文章
    发表评论