边框-外轮廓-文本-渐变-WEB字体

1 回顾

1.1 基本语法

新增的长度单位：  rem、vw、vh、vmax、vmin
新增的颜色设置方式： rgba()、hsl()、hsla()

1.2 选择器

1. 基本选择器标签名类名ID名全局并集： div,p,h1 {}交集： p.item {}2. 层级选择器后代元素选择器   空格子元素选择器     >选择紧邻在后面的一个兄弟元素    +选择后面所有的兄弟元素          ~3. 属性选择器[attrName][attrName="value"][attrName^="value"][attrName$="value"][attrName*="value"][src][width="100"] {}4. 伪类选择器4.1 动态伪类  :link :visited :hover :active  :focus4.2 目标伪类  :target4.3 语言伪类  :lang()4.4 UI元素伪类   :enabled  :disabled   :checked4.5 结构伪类  :root  :empty   :first-child :last-child  :nth-child(n)  :nth-last-child(n)  only-child  :first-of-type  :last-of-type  :nth-of-type(n)   :nth-last-of-type(n)  :only-of-type4.6 否定伪类   :not(选择器)5. 伪元素选择器::after  ::before ::first-letter ::first-line  ::placeholder  ::selection选择器权重：
ID > 类名、伪类、属性 > 标签名、伪元素 > 全局

1.3 新增盒子模型的CSS属性

box-sizing:  content-box / border-box
box-shadow
opacity

1.4 新增背景的CSS属性

background-origin: padding-box、conent-box、border-box
background-clip: border-box, padding-box, content-box, text
background-size: 两个长度 / cover、contain

2 CSS3 新增边框属性

2.1 边框圆角

CSS 属性名	含义	值
border-top-left-radius	设置左上角圆角	设置长度，一个值表示正圆的半径；二个值分别是x半径和y半径
border-top-right	设置右上角圆角	设置长度，一个值表示正圆的半径；二个值分别是x半径和y半径
border-bottom-left	设置左下角圆角	设置长度，一个值表示正圆的半径；二个值分别是x半径和y半径
border-bottom-right	设置右下角圆角	设置长度，一个值表示正圆的半径；二个值分别是x半径和y半径
border-radius	复合属性	长度，同时设置多个角

border-raiuds 属性值的设置规则：

设置正圆圆角：

1 个值：表示 4 个角的半径。

2 个值：第一个值表示左上和右下的半径，第二个值表示右上和左下的半径。

3 个值：第一个值表示左上角的半径，第二个值表示右上和左下的半径，第三个值表示右下的半径。

4 个值：分别表示左上、右上、右下、左下的半径。
            /* 一个值：四个角的半径 */border-radius: 20px;/* 两个值：左上，右下；左下，右上 */border-radius: 20px 80px; /* 三个值：左上，右上和左下 右下 */border-radius: 20px  60px 80px; /* 四个值：左上，右上，右下，左下 */border-radius: 20px  60px 80px 100px;
设置椭圆圆角（x半径与y半径不一致）

使用 / 分别设置 x 半径和y半径，每一组都可以写 1 ~ 4 个值
  ```css
border-radius:20px / 40px;
border-radius:20px 40px 50px 60px / 40px 30px 20px 10px;
border-radius:100px / 40px 30px 20px 10px;
  ``````

2.2 外轮廓

CSS 属性名	含义	值
outline-width	设置外轮廓宽度	长度
outline-color	设置外轮廓颜色	颜色
outline-style	设置外轮廓风格	none、solid、dashed、double、dotted 等
outline	复合属性	三个子属性的值
outline-offset	设置外轮廓与边框的距离，默认是 0	长度

注意： outline-offset 不是 outline 的子属性！

3 CSS3 新增文本属性

CSS 属性名	含义	值
text-decoration-line	设置哪一种修饰线	none: 默认值，无修饰线 underline: 下划线 overline: 上划线 line-through：删除线
text-decoraiton-color	设置修饰线颜色	颜色
text-decoration-style	设置修饰线风格	solid：默认，实线 dashed：虚线 dotted：点线 double：双实线 wavy：波浪线
text-decoration	复合属性	三个子属性的值
text-align-last	设置最后一行文本的水平对齐方式	start：默认值，开始方向对齐 end：结束方向对齐 left：左对齐 right：右对齐 center：中间对齐 justify：两端对齐
white-space	设置文本的换行方式	normal：默认值，默认的样式 pre：原格式显示 pre-wrap: 在pre的基础上增加了自动换行 pre-line: 在pre的基础上增加了自动换行但是会忽略多个空格。 nowrap：强制文本在一行显示
text-overflow	设置文本的溢出方式	clip：默认，溢出的文本裁掉 ellipsis：文字过多，后面显示省略号。
text-shadow	设置文本阴影	设置 2 ~ 4 个值，包括颜色、偏移位置、模糊值

注意：

CSS3之后， text-align 属性的默认值不是 left 了，而是 start 。

text-overflow 属性生效的前提是： ① 设置 overflow:hidden ② 需要设置 white-space: nowrap。

4 CSS3 渐变

CSS 中创建的渐变被当做图片，需要结合使用图片的CSS属性才能用，目前，渐变主要与 background-image 配合

5.1 线性渐变

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

渐变方向：使用关键字： to left、to top、to bottom、to right、to left bottom、to right bottom ...使用角度： 0deg ~ 360deg（顺时针变化）， 0deg表示从下到上，90deg表示从左到右颜色位置：使用长度指定颜色位置。

 background-image: linear-gradient(90deg, #fff 220px, #000 221px)background-image: linear-gradient(90deg, red, orange, yellow, green,cyan, blue, purple)

5.2 径向渐变

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

形状：   circle 或者 ellipse
半径大小： 指定长度，默认一直延伸到元素的边界
圆心位置： 指定坐标，默认值元素中心。

background-image: radial-gradient(red, blue);
background-image: radial-gradient(circle at 40% 40%, red, blue);
background-image: radial-gradient(circle at 40% 40%, red, blue);

5.3 重复渐变

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

5 WEB字体

5.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/ 字客网

5.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 字体网

5.3 字体图标

① 阿里图标

地址： http://www.iconfont.cn/

② font-awesome

地址：http://fontawesome.dashgame.com/

③ 字体图标制作工具 icoMoon

地址： http://icomoon.io/app/#/select

CSS3-边框-外轮廓-文本-渐变-WEB字体相关推荐

【CSS3系列】第五章 · web 字体
写在前面 Hello大家好, 我是[麟-小白],一位软件工程专业的学生,喜好计算机知识.希望大家能够一起学习进步呀!本人是一名在读大学生,专业水平有限,如发现错误或不足之处,请多多指正!谢谢大家!!! ...
web字体格式及几种在线格式转换工具介绍
目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体 ...
Web字体格式介绍及浏览器兼容性一览
目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体 ...
web字体名称、格式、在线格式转换工具
英文字体 google fonts Font-family:中文字体的英文名称宋体:SimSuncss中中文字体(font-family)的英文名称 Mac OS的一些: 华文细黑:STHeiti ...
css完整总结：第二篇（尺寸，外补白，内补白，边框，背景，颜色，字体，文本，文本装饰）
这次对CSS中所有的语法进行一次综合性的总结,后续的文章,将侧重与JavaScript和PHP,微信开发(小程序),以及Linux运维方面.css中设计到定位,布局,尺寸,外补白,内补白,边框,背景, ...
自定义字体样式引入使用方法、文本阴影、边框阴影、（边框）圆角、渐变、理解重绘与回流、渐进增强和优雅降级的区别
目录 1.文本阴影 text-shadow 2.边框阴影 box-shadow 3.自定义字体样式方法引入与使用方法举例: 4.(边框)圆角 5.渐变 6.过渡 transition 7.理论知识 ...
[H5]CSS3样式(背景、文本、字体、链接、列表、表格和轮廓)
[H5]CSS3样式(背景.文本.字体.链接.列表.表格和轮廓) [index.html] <!DOCTYPE html> <html lang="en"> ...
字体样式，文本样式，背景样式，边框样式，线性渐变，伪类选择器，css权重
`## CSS入门基础(二) 字体样式字体类型 font-family 字体大小 font-size 字体粗细 font-weight 100-700 400=normal 700=bold 字体得 ...
CSS3_01_圆角_边框_渐变_字体
CSS3 是最新的 CSS 标准. 我们的 CSS3 教程向您讲解 CSS3 中的新特性. 手册说明: CSS3使用了层叠样式表技术,可以对网页布局.字体.颜色.背景灯效果做出控制. css3作为cs ...

CSS3-边框-外轮廓-文本-渐变-WEB字体

边框-外轮廓-文本-渐变-WEB字体

1 回顾

1.1 基本语法

1.2 选择器

1.3 新增盒子模型的CSS属性

1.4 新增背景的CSS属性

2 CSS3 新增边框属性

2.1 边框圆角

2.2 外轮廓

3 CSS3 新增文本属性

4 CSS3 渐变

5.1 线性渐变

5.2 径向渐变

5.3 重复渐变

5 WEB字体

5.1 web 字体基本语法

5.2 定制字体

5.3 字体图标

① 阿里图标

② font-awesome

③ 字体图标制作工具 icoMoon

CSS3-边框-外轮廓-文本-渐变-WEB字体相关推荐

最新文章

热门文章