囫囵吞枣——CSS3

观  http://www.runoob.com/css3/css3-intro.html 学习笔记。  （CSS动画和css用户界面和css弹性盒子还未学习）

CSS3 圆角

 圆角：  border-radius：（20 %  或者  20px）

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
• 一个值： 四个圆角值相同

      border-top-left-radius (左上角)

      border-top-right-radius （右上角）

      border-bottom-left-radius  (左下角)

      border-bottom-right-radius  (右下角)

CSS3  阴影

盒子阴影：box-shadow: h-shadow （水平位置阴影）v-shadow （垂直阴影位置）blur（模糊距离） spread （阴影尺寸）color （颜色）inset（外）/outset(内);

           例：  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);            如图下：

                

      http://www.runoob.com/try/try.php?filename=trycss3_box-shadow4   用阴影边成卡片效果，赞；

文本阴影：text-shadow  属性适用于文本阴影。  您可以指定 水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：

注：可以在::before（在每个<p>元素之前插入内容） 和 ::after（在每个<p>元素之后插入内容） 两个伪元素添加阴影效果

CSS3 边界图片

注意: Internet Explorer 不支持 border-image 属性

border-image: source（地址） slice（图像边界向内偏移） width（图像边界的宽度） outset（用于指定在边框外部绘制 border-image-area 的量） repeat（重复）|stretch（拉伸）|round（铺满）;

CSS3 背景

添加背景图片： background-image: url(地址)    可以添加多个图片，图片中显示在最顶端的为第一张。

图片大小：background-size

位置区域：background-origin: padding-box（背景图像相对于内边距框来定位。图下效果1）    border-box（背景图像相对于边框盒来定位。图下效果2）   content-box（背景图像相对于内容框来定位。图下效果3）;

绘制背景：background-clip: border-box（绘制在内边框）|padding-box（绘制在边框）|content-box（内容框）;

CSS3 渐变

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

  语法线性渐变：  background: linear-gradient(direction（方向   上下左右  对角）, color-stop1（颜色）, color-stop2（颜色）, ...);       渐变颜色过渡可写多个

                 例：background: linear-gradient(red, blue);   图一

                        background: linear-gradient(red,white, blue);   图二

                        background: linear-gradient(gba(255,0,0,0), rgba(255,0,0,1) ）；      图三      

    图一                                     图二                          图三

重复线性渐变：repeating-linear-gradient(direction（方向   上下左右  对角）, color-stop1（颜色）, color-stop2（颜色）, ...) 

径向渐变： background: linear-gradient(angle（角度值，单位deg）,shape size（circle 表示圆形，ellipse 表示椭圆形(默认)）， color-stop1, color-stop2);              （如果不设定角度，默认以中心点向四周渐变 ）

注：角度是指水平线和渐变线之间的角度，逆时针方向计算。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。如：闹钟12点方向是0度  3点方向是90度  6点方向180度  9点方向是-90度

例： background: linear-gradient(-90deg, red, blue);  

CSS3 文本效果

上篇css的笔记中，未记录overflow，在这里弥补。

overflow ：属性规定当内容溢出元素框时发生的事情。

1. visible  默认值。内容不会被修剪，会呈现在元素框之外。
2. hidden内容会被修剪，并且其余内容是不可见的。
3. scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4. auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
5. inherit规定应该从父元素继承 overflow 属性的值。

text-overflow:clip（修剪文本   如图二）  ellipsis（显示省略符号来代表被修剪的文本。如图一）  string（使用给定的字符串来代表被修剪的文本）;

图一              图二

 文本换行： 

word-wrap: normal（只在允许的断字点换行（浏览器保持默认处理）。理解：在完整的单词拼写后换行）|break-word（在长单词或 URL 地址内部进行换行。理解：即使单词没拼写完整，依旧会强行换行）;
word-break: normal（使用浏览器默认的换行规则）|break-all（允许在单词内换行 强制换行）|keep-all（半角空格或连字符处换行 不强制）;

 字体：

   自定义字体必须包含在 @font-face {}  内才能生效

• 字体名称      font-family: 合法的字体名称;
• 地址路径      src: url(字体的地址);
• 字体粗细      font-weight:bold： normal（默认值）
• 拉伸字体      font-stretch：normal(默认值) / condensed /ultra-condensed（拉伸最宽的值） / extra-condensed / semi-condensed /expanded /semi-expanded /extra-expanded /ultra-expanded（拉伸最窄的值）

            注：(我也不太了解这个东西，我测试了一下，好像没啥区别，如果有对此有详细了解的，请分享给我，谢谢 ~~)

• 字体样式      font-style：normal（默认样式） italic（斜体的字体样式） oblique（倾斜的字体样式）   ps：好尴尬，我测试里，这里也没显示效果

2D 转换

支持的版本号：

谷歌查询版本号：chrome://version/     其他查询方法，自寻百度。哈哈~~

PS :看好版本号，记得加版本号的前缀。

   

translate() 方法

语法：translate（x，y）   ps：  按照 X Y 轴 移动 ；  

   可以做那么漂亮的样子哟~     第二块div大概是：  transform:translate(20px,-60px);   第一块div背景色本身就是模糊的。

           

rotate() 方法

语法：rotate(角度值deg);   ps：  按照 逆时针转动

 例子：transform:rotate(480deg);        下图是旋转效果，但不是例子效果，思：两个div重叠，浮上层div  旋转30度(细节自究)。

scale() 方法

语法：scale()方法；

    该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

    例：transform: scale(2,3); /* 标准语法 */        宽 / 高

skew() 方法

语法：transform:skew(<angle> [,<angle>]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。(PS:不了解~)

matrix() 方法

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

CSS3 多列  

  耶耶耶~能静下心看语法真好。      哈哈。

 

CSS3 可以将文本内容设计成像报纸一样的多列布局。那么好看！！！ 

•  创建多列（指定元素应该被分割的列数。）： column-count:列值
•   列间距（指定列与列之间的间隙）： column-gap:数值
•  多列宽度：column-width：数值     注：列宽度间：低于平均值（屏宽/列值），是不显示的。
•  边框宽度：column-rule-width：数值
•  边框颜色： column-rule-color：颜色值
•  边框样式：column-rule-style: none（默认值）|hidden（隐藏规则）|dotted（点状规则 图一）|dashed（虚线规则  图二）|solid（实线规则  图三）|double（实线双规则 图四）|groove（图五）|ridge（图六）|inset（图七）|outset（图八）; 

 PS :彩色图均是设置参数后的效果（背景色：red  宽：150），图五 图六 图七 图八 该效果取决于宽度和颜色值。

                图一           图二         图三        图四      图五     图六  图七 图八

•  (column-rule-* 所有属性的简写c）：  column-rule-
•   column ：设置column-width和column-count的简写
•   横并（指定两列间边框的颜色）：  column-span: all;                 横并效果如图一     不横并如图二

  图一    图二

CSS3 用户界面

 注：resize  outline-offset  不支持IE

 resize指定元素是否是由用户调整大小：resize: none（默认值）|both（用户可调整元素的高度和宽度。）|horizontal（用户可调整元素的宽度。）|vertical（可以调整元素的高度）:

 允许你以某种方式定义某些元素，以适应指定区域。box-sizing: content-box（指定元素的宽和高）|border-box（...）|inherit（指定box-sizing属性的值，应该从父元素继承）:

圆角图片

圆角图片值： border-radius：属性

例子：自适应图片

    max- 100%;    最大宽度
    height: auto;            高度自适应                        

                                                     ————————————好像还有很深的知识。