Css3阴影及盒子尺寸

2015-04-18

css3的方式设置颜色

1 颜色的组成，电脑中的三元色
三原色，所谓三原色，就是指这三种色中的任意一色都不能由另外两种原色混合产生，而其他色可由这三色按照一定的比例混合出来，色彩学上将这三个独立的色称为三原色。
电脑中的三原色为：红 绿 蓝

css3中设置颜色的方式

1 transparent 设置北京色伪透明 
    background-color:transparent;
2 opacity+颜色 设置北京色伪半透明
    background-color: red;
    opacity:0.5;
3 rgba 设置颜色伪红色，透明度为0.5
    r(red(红色)) ，green(绿色) blue(蓝色) alpha(透明度)
    background-color:rgba(255,0,0,0.5)
4 hsla 设置颜色为红色，透明度为0.5
    H :色调 哪种哦那个颜色   0~360
    S : 饱和度
     饱和度越大，颜色越鲜艳 0%~100%
    L 亮度 亮度越大，颜色越白 0%~100%
    A 透明度 0~1

阴影

1 文本阴影 text-shadow
    x轴 值越大，阴影越向右偏移，值越小，阴影越向左偏移
    y轴 值越大，阴影越向下偏移，值越小，阴影越向上偏移
    模糊半径 值越大，阴影越模糊，值越小，阴影越清晰 最小值为0
    颜色：自己选择
    text-shadow:15px 15px 12px yellow;
2 盒子阴影 box-shadow
    设置盒子阴影的语法及参数
    box-shadow: x轴偏移量 y轴偏移量 阴影模糊程度 阴影扩展半径 因应酬颜色 投影方式
    例： box-shadow: 10px 10px 20px 5px red inset(内阴影);
    如若在一个文字上叠加多个阴影
    例： text-shadow:15px 15px 12px yellow;
                    -15px -15px 12px red;
                    15px -15px 12px blue;

设置盒子尺寸

盒子总宽度=width(内容跨度)+(padding*2)+(border*2); 
1 box-sizing:content-box
    当值为content-box的时候，盒子尺寸的计算方式为：盒子总宽度=width(内容跨度)+(padding*2)+(border*2); 
2 box-sizing: border-box
    当值为border-box 的时候，盒子尺寸计算方式为：盒子总宽度 =width=(padding*2)+(border*2)+内容的宽度（可变）

边框属性

1 边框圆角 圆形 border-radius: 50%;(宽高要一致才行)
 左上：border-top-left-radius: 50%;
 右上：border-top-right-radius: 50%;
 右下：border-bottom-right-radius:50%;
 左下：border-bottom-left-radius:50%;
 2 边框图片
 引入图片 border-image-source:url()
 切割引入的图片 border-image-slice: 27 27 27 27;
 边框的宽度 border-image-width: 20px;
 图片的排列方式 border-image-repeat:round;(repeat:平铺； stretch: 拉伸)

css3新背景属性

以前的背景属性：
1 background-color:背景颜色
2 background-image:背景图片
3 background-repeat：背景重复
4 background-position:背景定位
5 background-attachment:背景固定（scroll/fixed)

CSS3图片尺寸及属性值的不同含义

1 具体像素 作用：定义了背景图片的尺寸
例：background-size:500px 200px;
2 百分比  是相对于图片的原始尺寸
例： background-size:100% 100%;
3 cover 作用：不论图片如何按比例缩放，都要完全覆盖整个div;
例：background-size:cover;
4 contain 作用： 保证图片完全显示在div中，不论是否完全覆盖整个div
例：background-size:contain;

CSS3设置背景图片定位原点

1 background-origin 背景原点 
    background-origin 属性规定background-position 属性相对于什么位置来定位
    1）background-orgin:padding-box  从padding区域开始显示背景
    2）background-orgin:border-box 从border区域开始显示背景
    3）background-orgin:content-box 从content 区域开始显示背景
2 background-clip 背景裁切
    background-clip属性规定背景的绘制区域
    1）background-clip:padding-box 从padding区域项外裁切背景
    2）background-clip：border-box 从border区域向外裁切背景
    3）background-clip：content-box; 从content区域有向外裁切背景

CSS3设置多重背景

1 给多背景图片定位
分开写：background-position:left top,
                            right top,
                            right bottom,

多重背景引入图片
background-image:url();
                url(),
                url();
2 合起来一起 写：
background :url() left top no-repeat,
            url() right top no-repeat
            url() right bottom no-repeat