CSS3基础

一、CSS3主要包含以下部分：

      选择器、盒模型 、背景和边框 、文字特效 、2D/3D转换 、动画 、多列布局和用户界面。

二、CSS3属性选择器

1. E[attr]只使用属性名，但没有确定任何属性值

1. E[type="text"]指定属性名，并指定了该属性的属性值

1. E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的"~"不能不写

1. E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的

1. E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的

1. E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value

1. E[attr|="value"]指定了属性名，并且属性值是value或者以"value-"开头的

三、CSS3结构性伪类

     1、E:empty 表示E元素没有子节点。注意：包含文本节点

  2、E:only-child表示E父元素中只有一个子节点。注意：不包含文本节点

  3、E:nth-child(n) 表示E父元素的第n个子节点，且类型为E

  4、E:only-of-type 表示E父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：不包含文本节点

 注释：三大结点的含义：

    如<a href="#">我是文本结点</a>

     a---元素结点；href---属性节点；我是文本结点---文本节点。

四、CSS3伪类

 <1>表单控件

 1、不能获取焦点 <input type="text" value="我是输入框" disabled/>

 2、能获取焦点  <input type="text" value="我是输入框" enabled/>

 <2>兼容性

 E::selection表示E元素在用户选中文字时（moz）

 p：：-moz-selection{color：#fff；background-color：black；}//火狐

 p：：selection{color：#fff；background-color：black；}

 <3>E~F //表示E元素毗邻的所有元素

   E+F //表示E的next元素

五、CSS3样式

  1、background-color:rgba(255.255,255,0.6);

  2、文字阴影 text-shadow：X Y blur color；

   x 横向偏移  y 纵向偏移   blur 模糊距离   color 阴影颜色

   叠加：text-shadow：X Y blur red，X Y blur green；//红在绿上面

   如：text-shadow: 2px 2px 2px red,5px 5px 5px green;

    

 3、盒模型阴影 box-shadow：[inset]X Y blur [spread] color;

  [inset]：投影方式（默认为外投影，inset为内投影）

  [spread]：扩展阴影半径（先扩展原有形状，再开始画阴影）

   内投影：

  

  外投影：

  

 4、圆角

 border-radius: 3px/5px;     /前面是水平方向圆角，后面是垂直方向圆角，不加/指的两个方向圆角相同

 border-radius：5px ;       四个方向都一样

 border-radius: 5px 10px;     对角

 border-radius: 5px 7px 10px;  斜对角

 border-radius:5px 6px 7px 8px; 全部

  

 5、自制单选框 

 

   

         

 5、text-overflow：定义省略文本的处理方式

   clip:无省略号 

   ellipsis:省略号(注意配合overflow:hidden（溢出隐藏）和white-space:nowrap（要求不自动换行）一块使用)

   如：使用<p title=“文字文字”>文字文字</p>并写p标签css样式

 6、resize：自由缩放样式

        both：水平垂直都可以缩放

        horizontal：只有水平方向可以缩放

        vertical 只有垂直方向可以缩放

   注意：一定要配合overflow:auto 一块使用

 7、direction：定义文字排列方式(全兼容)

   注意：要配合unicode-bidi:bidi-override; 一块使用

   

   

    8、多列

   多列：将文本内容设计成像报纸一样的多列布局

   column-width：指定列的宽度

   column-count：要分的列数

   column-gap：列之间的距离

   column-rule：栏目间隔线（column-rule-style、column-rule-width和column-rule-color的集合样式）

   column-rule-style：间隔线类型（hidden：定义隐藏规则/dotted：定义点状规则/dashed：定义虚线规则/solid：定义实               

                线规则/double：定义双线规则）

        

 

  9、过渡

    transition：过渡（css3的动画的一种）

    transition-property：要运动的样式（all || [attr] || none）

    transition-duration：规定完成过渡效果需要多少秒或毫秒

    transition-delay：定义动画延迟多久开始

    transition-timing-function：运动速度曲线。ease：（逐渐变慢）默认值；linear：（匀速）；ease-in：(加速)；ease-out：（减速）；ease-in-out：（先加速后减速）；cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ），可以百度一下贝赛尔曲线的图

    transition: property duration timing-function delay //集合样式

   

 10、边框图片

  边框图片：border-image（集合样式）

   border-image-source 引入图片url

   border-image-slice 切割图片（从外向内）

   border-image-width 边框宽度（展示边框图片区域）

   border-image-repeat 图片的排列方式

                 round 四舍五入，repeat 重复，stretch 拉伸

  

 

ok!!!