Day12_CSS3课堂笔记

最新推荐文章于 2021-09-02 16:09:09 发布

人生本该如此

最新推荐文章于 2021-09-02 16:09:09 发布

阅读量104

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_48733024/article/details/119613936

版权

前端专栏收录该内容

39 篇文章

订阅专栏

Day12 CSS3 笔记

1 CSS3 新增盒子模型相关样式

① box-sizing 属性

该属性可以调整给元素设置 width 和 height 是设置内容宽高还是元素总宽高，box-sizing 属性取值如下：

content-box		默认值，width 和 height 设置的是内容宽高。
border-box		width 和 height 设置的元素的总宽高（内容+内边距+边框）

② 盒子阴影 box-shadow

使用 CSS 属性 box-shadow 可以设置元素的阴影，可以指定阴影的偏移位置、模糊值、外延值、颜色、内外阴影，最少需要指定偏移位置，默认颜色是黑色，默认是外阴影。

值的设置规则：

/* 设置阴影偏移位置 */
box-shadow: 5px 5px;

/* 设置阴影颜色 */
box-shadow: 5px 5px #f90;
box-shadow: cyan 5px 5px;

/* 设置阴影的模糊值 */
box-shadow: 5px 5px 10px;
box-shadow: 5px 5px 10px #f90;
box-shadow: pink 5px 5px 10px;

/* 设置阴影的外延值 */
box-shadow: 5px 5px 10px -2px;
box-shadow: 5px 5px 10px -2px #f90;
box-shadow: pink 5px 5px 10px -2px;

/* 内阴影 */
box-shadow: 5px 5px inset;
box-shadow: 5px 5px 5px inset;
box-shadow: 5px 5px 5px #f90 inset;
box-shadow: 5px 5px 5px inset pink;

我们还可以给元素设置多个阴影，设置方式如下：

box-shadow: 0 0 10px orange,
            0 0 10px 10px yellow, 
            0 0 10px 20px green, 
            0 0 10px 30px cyan;

③ 不透明度 opacity

opacity 用于设置元素的不透明度，默认值是 1，取值范围 0 ~ 1，值越大越不透明，0 完全透明， 1 完全不透明。

2 CSS3 新增背景属性

2.1 新增属性

① background-origin

该属性可以设置背景图片的原点的位置，有如下值：

padding-box		默认值，默认原定在内边距上
content-box		原点在内容上
border-box		原点在边框上

② background-clip

该属性可以设置背景图像在哪个区域被显示被裁切，值如下：

bordre-box		默认值，边框以外的背景图像被裁切
padding-box		内边距以外的背景图像被裁切
content-box		内容以外的背景图像被裁切
text			文字以外的背景图像被裁切，需要加 -webkit- 私有前缀

③ background-size

该属性可以设置背景图像的尺寸，值设置规则如下：

1. 设置两个长度，分别表示图像的宽和高
2. 如果使用百分比设置长度，分别参照所在元素的宽和高。
3. 如果只设置一个长度，被认为设置了背景图像宽度，高度根据比例自动计算。
4. 可以设置为关键字 contain， 保持图像原比例，优先让图像全部显示在元素上。
5. 可以设置为关键字 cover，保持图像原比例，优先元素上被填充满图像，图像可能显示不完整。推荐。

2.2 background 复合属性

1. clip 和 origin 的值是一样的，这样的值如果复合属性中只有一个，表示同时设置 orign 和 clip； 如果这样的值有两个，第一个是设置 origin，第二个设置 clip。
2. position 和 size 的值必须放在一起，使用 / 分隔，前面是 position ，后面是 size

2.3 多背景图

CSS3 允许给一个元素设置多个背景图像，使用规则如下：

background: url(../images/bg-tl.png) no-repeat left top, 
            url(../images/bg-tr.png) no-repeat right top,
            url(../images/bg-bl.png) no-repeat left bottom,
            url(../images/bg-br.png) no-repeat right bottom,
            url(../images/bg04.jpg);

3 CSS3 新增边框属性

3.1 边框圆角

CSS 属性名	含义	值
border-top-left-radius	设置左上角圆角	长度
border-top-right-radius	设置右上角圆角	长度
border-bottom-left-radius	设置左下角圆角	长度
border-bottom-right-radius	设置右下角圆角	长度
border-radius	设置多个角圆角	一个或多个长度

圆角属性值的设置规则：

1. 单独设置每个角的圆角，可以写1个值或2个值，1 个值是同时设置x半径和y半径， 两个值第一个是x半径，第二个是y半径
2. 使用百分比设置圆角，x 半径参照元素宽，y 半径参照元素高。

复合属性的使用：

 border-radius: 20px;

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

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

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

/* 分别设置每个角的 x 半径 和 y 半径 */
border-radius: 20px 40px / 10px 20px 30px 40px;

3.2 外轮廓

CSS 属性名	含义	值
outline-style	设置外轮廓风格	none：默认值，无风格。 solid：实线。 dashed：虚线。 dottted：点线。 double：双实线。
outline-color	设置外轮廓颜色	颜色
outline-width	设置外轮廓宽度	长度
outline	复合属性	outline-style、outline-color、outline-width 的值。
outline-offset	设置外轮廓与边框距离。不是 outline 的子属性！	长度，可以是负值

外轮廓与边框的区别：

1. 外轮廓默认在边框的外边。
2. 外轮廓在文档流中不占据位置。

4 CSS3 新增文本属性

CSS 属性名	含义	值
text-align-last	设置最后一行文字的水平对齐方式	start：默认值，开始方向对齐。 end：结束方向对齐。 left：左对齐。 right：右对齐。 justify：两端对齐。
text-decoration-line	设置修饰线的形式	none：无修饰线,默认值。 underline：下划线。 overline：上划线。 line-throuth：删除线
text-decoration-style	设置修饰线风格	solid：实线，默认值。 dashed：虚线。 dotted：点线。 double：双实线。 wavy：波浪线。
text-decoration-color	设置修饰线颜色	颜色
text-decoration	修饰线复合属性	多个子属性的值，空格分隔
white-space	设置文本显示格式	normal：默认值。 pre：原格式显示。 pre-wrap：在pre的基础上自动换行。 pre-line：保留输入的换行符，其他同normal nowrap：强制不换行。
text-overflow	设置溢出文本	clip：直接裁切,默认值。 ellispsis：显示为省略号。
text-shadow	设置文字阴影	长度设置的偏移位置、长度设置的模糊值、阴影颜色

设置溢出文本后面显示省略号：

需要 text-overflow、overflow、white-space 三个属性的配合

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

文字阴影的设置规则：

/* 设置偏移位置 */
text-shadow: 3px 3px;
/* 设置偏移位置和模糊值 */
text-shadow: 3px 3px 5px;
/* 设置偏移位置、模糊值、颜色 */
text-shadow: 5px 5px 5px #999;

text-shadow: 1px 1px 0px rgb(188 188 188), 
             2px 2px 0px rgb(177 177 177), 
             3px 3px 0px rgb(166 166 166), 
             4px 4px 0px rgb(155 155 155);

5 CSS3 渐变

创建的渐变作为图片去使用，需要与以图片位置的CSS属性配合使用，与渐变配合最多的 CSS 属性是 background-image。

5.1 线性渐变

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

1. 渐变方向
   使用关键字设置：  to left、to bottom、to right、to top、to top left、to top right ...
   使用角度： 0deg ~ 360deg  0deg表示从下到上，90deg表示从左到右
   
2. 颜色的位置
   使用长度设置颜色的位置
   位置可以省略，颜色会均匀分布

5.2 径向渐变（了解）

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

1. 形状
   默认根据元素自动定义，可以设置固定的椭圆或正圆（circle）
 
2. 半径
   默认到达元素边界
   可以设置固定长度作为半径
   
3. 圆心位置
   默认在元素正中心
   可以用两个长度作为坐标设置圆心位置
   
4. 颜色的位置
   使用长度设置颜色的位置
   位置可以省略，颜色会均匀分布

5.3 重复渐变

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

6 WEB字体

6.1 web 字体基本语法

/* 引入Web字体 给web字体取名字*/
@font-face {
    font-family: "fangfang";
    src: url("sources/fonts/FZSJ-WSMQSJW.woff2") format("woff2"),
         url("sources/fonts/FZSJ-WSMQSJW.woff") format("woff"),
         url("sources/fonts/FZSJ-WSMQSJW.ttf") format("truetype"),
         url("sources/fonts/FZSJ-WSMQSJW.eot") format("embedded-opentype"),
         url("sources/fonts/FZSJ-WSMQSJW.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

/*使用web字体*/
.aritcle {
    font-family: "fangfang";
}

字体格式的转换工具：

https://www.fontsquirrel.com/tools/webfont-generator FontSquirrel在线工具
https://www.fontke.com/tool/fontface/ 字客网

6.2 定制字体

字体定制工具：

https://www.iconfont.cn/webfont?spm=a313x.7781068.0.d81ec59f2#!/webfont/index 阿里Web字体
http://www.youziku.com/ 字体库网站
https://www.ziti163.com/webfont/create.aspx 字体网