淘先锋技术网

首页 1 2 3 4 5 6 7

CSS3 边框，文本，渐变属性 （二）

2 CSS3 新增边框属性

2.1 边框圆角

CSS 属性名含义值
border-top-left-radius设置左上角圆角一个长度：同时设置x半径和y半径。
二个长度：第一个是x半径，第二个是y半径
border-top-right-radius设置右上角圆角一个长度：同时设置x半径和y半径。
二个长度：第一个是x半径，第二个是y半径
border-bottom-left-radius设置左下角圆角一个长度：同时设置x半径和y半径。
二个长度：第一个是x半径，第二个是y半径
border-bottom-right-radius设置右下角圆角一个长度：同时设置x半径和y半径。
二个长度：第一个是x半径，第二个是y半径
border-radius复合属性，同时设置4个圆角

总结：

border-radius 复合属性值的规则：

① 设置正圆圆角

/* 设置4个角 */
border-radius: 20px;

/* 20px:左上和右下  40px:左下和右上 */
border-radius: 20px 40px;

/* 20px:左上 40px：左下和右上  60px：右下 */
border-radius: 20px 40px 60px;

/* 左上 右上 右下 左下 */
border-radius: 10px 20px 30px 40px;

② 设置椭圆圆角

值的中间写个 /, 左边设置 x 半径，右边设置 y 半径，每一边都可以设置1~4个值

 /* 复合属性设置椭圆圆角 */
border-radius: 20px / 40px 30px;
border-radius: 20px 30px / 40px 30px;
border-radius: 20px 30px 30px / 40px 30px;
border-radius: 20px 30px 30px 40px / 40px 30px;

使用百分比作为长度设置圆角半径：

x 半径参照元素的宽度，y 半径参照元素的高度。

2.2 外轮廓 outline

CSS 属性名含义值
outline-style外轮廓风格同 border-style
outline-width外轮廓宽度长度
outline-color外轮廓颜色颜色
outline外轮廓复合属性
outline-offset外轮廓与边框距离
该属性并不是 outline 的子属性，需要单独设置。		长度，可以是负值

outline 的特点（outline 与边框的区别）？

  1. 外轮廓不占位置，不影响盒子大小。
  2. 外轮廓如果与边框重叠了，会显示在边框的上面。

3 CSS3 新增文本属性

CSS 属性名含义值
text-align-last设置元素中最后一行文字的水平对齐方式start： 文字书写开始方向，默认值。
end： 靠文字书写结束方向。
left： 靠左。
right： 靠右。
justify： 两端对齐。
text-decroation-line文本修饰线的形式none： 没有修饰线。
**underline：**下划线。
overline： 上划线。
**line-through：**删除线。
text-decoration-style文本修饰线的风格solid： 实现。
**dahsed：**虚线。
**dotted：**点线。
**double：**双实线。
**wavy：**波浪线
text-decoration-color文本修饰线的颜色颜色
text-decoration复合属性没有属性和数量要求
white-space设置元素中文本的换行方式**normal：**默认值。
nowrap： 强制不换行。
pre： 原格式显示。
pre-wrap： 原格式显示+自动换行。
pre-line： 在默认效果的基础上+识别换行符
text-overflow设置文本溢出的显示方式**clip：**裁剪，默认值。
**ellipsis：**显示为省略号。
text-shadow设置文字阴影可以设置阴影偏移位置、模糊值和颜色
-webkit-text-stroke文字描边需要设置两个值，一个是颜色，一个是描边宽度。

总结：

  1. CSS3规定，text-align 属性默认值不再是 left， 而是 start，表示当前所使用的语言书写开始的方向。

  2. CSS3中，text-decoration 成为了复合属性，原来 text-decoration的功能交给了子属性 text-decoration-line。

  3. 如果设置溢出文本显示为省略号，有两个前提，第一，强制文字不换行；第二，设置溢出内容隐藏。

    /* 文字强制一行显示 */
white-space: nowrap;

/* 设置隐藏溢出内容 */
overflow: hidden;

/* 溢出的文本显示为省略号 */
text-overflow: ellipsis;

  4. 文字阴影，相比于盒子阴影不能设置内阴影和外延值， 与盒子阴影一样也可以设置多层阴影。

4 CSS3 渐变

渐变在 CSS 中被作为一个图像去使用，需要配合使用图像的 CSS 属性才能用，大部分情况需要配合 background-image 使用。

4.1 线性渐变

linear-gradient(渐变方向, 颜色1 位置， 颜色2 位置， 颜色3 位置)；

1. 渐变方向：
   使用关键字： to left、to top、to right、to bottom、to top left、to top right、to bottom left、to bottom right
   使用角度： 0deg~360deg  0deg从下到上， 角度越大方向沿顺时针旋转
   
2. 颜色

3. 颜色的位置： 使用长度设置颜色位置

4.2 径向渐变

radial-gradient(形状 半径 at 圆心坐标， 颜色1 位置， 颜色2 位置， 颜色3 位置)

1. 形状，可以指定 circle 或者 ellipsis

2. 半径， 使用长度指定半径，如果省略会到达元素边界

3. 圆心坐标， 使用两个关键字（left、right、center/ top bottom center）
            使用两个长度表示坐标

5 颜色

6. 颜色的位置： 使用长度设置颜色位置

4.3 重复渐变

repeating-linear-gradient()		重复线性渐变
repeating-radial-gradent()      重复径向渐变