CSS3练习笔记

最新推荐文章于 2024-06-20 00:04:40 发布

谈晓鸣

最新推荐文章于 2024-06-20 00:04:40 发布

阅读量247

点赞数

分类专栏：大前端文章标签： css css3

本文链接：https://blog.csdn.net/tandaxia/article/details/106222786

版权

大前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS3被划分为模块，其中最重要的CSS3模块包括：

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

1、边框

border-image：设置所有border-image-*属性的简写形式。可能的值有：border-image-source：用在边框的图片的路径；border-image-slice：图片边框向内偏移；border-image-width：图片边框的宽度；border-image-outset：边框图像区域超出边框的量；border-image-repeat：图像边框是否平铺(repeated)、铺满(rounded)或拉伸(stretched)
border-radius：设置所有四个border-*-radius属性的简写形式
box-shadow：向方框添加一个或多个阴影。box-shadow: h-shadow(必需，水平阴影的位置) v-shadow(必需，垂直阴影的位置) blur(可选，模糊距离) spread(可选，阴影的尺寸) color(可选，阴影的颜色) inset(可选，将外部阴影outset改为内部阴影);

/* border-image测试，border-width是关键，是否虚线实现还是border-color不重要 */
.border-image-ele, .border-image-ele2{
	display: inline-block; padding: 5px 10px; 
	border: 10px dashed black; margin: 10px;
}
.border-image-ele{ border-image: url(../img/star/border.png) 30 30 round; }
.border-image-ele2 { border-image: url(../img/star/border.png) 30 30 stretch;}

2、颜色

background-clip：border-box | padding-box | content-box; 规定背景的裁剪区域，默认值为border-box; border-box: 背景被裁剪到边框盒；padding-box: 背景被裁剪到内边距框；content-box: 背景被裁剪到内容框
background-origin: padding-box | border-box | content-box; 规定背景图片的定位，默认值为padding-box。padding-box: 背景图片相对于内边距来定位；border-box: 背景图片相对于边框盒来定位；content-box: 背景图片相对于内容框来定位
background-size: length | percentage | cover | contain; 规定背景图片的尺寸，默认值为auto。length: 设置背景图片的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto；percentage: 以父元素的百分比来设置背景图片的宽度和高度。第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto；cover: 把背景图片扩展至足够大，以使背景图片完全覆盖背景区域，背景图片的某些部分也许无法显示在背景定位区域中；contain: 把背景图片扩展至最大尺寸，以使其宽度和高度完全适应内容区域

3、文本效果

text-overflow：clip | ellipsis; 规定文本溢出包含元素时发生的事情。clip: 修剪文本；ellipsis：显示省略号来代表被修剪的文本；
text-shadow：语法text-shadow: h-shadow v-shadow blur color; ，向文本添加阴影。h-shadow：水平阴影的位置(必需); v-shadow: 垂直阴影的位置(必需); blur: 模糊的距离(可选); color: 阴影的颜色(可选)
word-break：normal | break-all | keep-all; 规定非中日韩文本的换行规则。normal：使用浏览器默认的换行规则；break-all：允许在单词内换行；keep-all：只能在半角空格或连字符处换行
word-wrap：normal | break-word; 允许长单词或url地址换行到下一行。normal：只在允许的断字点换行（浏览器保持默认处理）；break-word：在长单词或url地址内部进行换行。

4、字体

通过CSS3, Web设计师再也不必被迫使用“web-safe”字体了。
在CSS3 之前，web设计师必须使用已在用户计算机上安装好的字体。通过CSS3，web设计师可以使用他们喜欢的任意字体。当您找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时自动下载到用户的计算机上。您“自己的”字体是在CSS3 @font-face规则定义的。

<style>
	@font-face {
		font-family: myFirstFont;
		src: url('Sansation_Light.ttf'), 
		     url('Sansation_Light.eot'); /* IE9+ */
	}
	div { font-family: myFirstFont; }
</style>

font-family：规定字体的名称（必需）
src：定义字体文件的url(必需)
font-stretch：定义如何拉伸字体（可选），默认是normal
font-style：定义字体的样式（可选），默认是normal
font-weight：定义字体的粗细（可选），默认是normal
unicode-range：定义字体支持的UNICODE字符范围（可选），默认是“U+0-10FFFF”

5、2D转换

通过CSS转换，我们能够对元素进行移动、缩放、转动、拉伸。
transform的2D转换方法有：

translate(x, y)：元素从当前位置移动，根据给定的left(x坐标)和top(y坐标)位置参数。
rotate(angle)：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
scale(x, y)：元素的尺寸会增加或减少，根据给定的宽度（X轴）和高度（Y轴）参数
skew(x-angle, y-angle)：元素翻转给定的角度，根据给定的水平线（X轴）和垂直线（Y轴）参数
matrix(n,n,n,n,n,n)：将所有2D转换方法组合在一起。需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。示例：transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0)

6、3D转换

3D转换的使用属性除了2D中的transform和transform-origin，还有transform-style、perspective、perspective-origin、backface-visibility。

transform-style：规定被嵌套元素如何在3D空间中显示。语法：transform-style: flat | preserve-3d;，flat表示子元素不保留其3D尾椎；preserve-3d表示子元素保留其3D位置。
perspective：规定3D元素的透视效果。语法：perspective: numer | none;，number表示元素距离视图的距离；none表示默认值，为0，不设置透视。
perspective-origin：规定3D元素底部位置。语法：perspective-origin: x-axis y-axis;，x-axis | y-axis 定义该视图在X轴 | Y轴上的位置，可能的值有left | top | right | bottom | center | length | %。
backface-visibility：定义元素在不面对屏幕时是否可见。语法：backface-visibility: visible | hidden;，visible表示背面是可见的，默认是可见；hidden表示背面是不可见的。

7、过渡transition

过渡是元素从一种样式逐渐变为另一种效的效果。要实现这一点，必须规定两项内容：

规定您希望把效果添加到哪个CSS属性上
规定效果的时长
过渡的转换属性有这些：
transition：简写属性，用于在一个属性中设置四个过渡属性。语法：transition: property duration timing-function delay;，默认值是：all 0 ease 0。举例说明，比如：transition: width 2s;、transition: all 1s;
transition-property：规定应用过渡的CSS属性的名称。语法：transition-property: none | all | property，none表示没有属性会获得过渡效果，all表示所有属性都会获得过渡效果，property表示定义应用过渡效果的css属性名称列表，多个属性则以逗号分隔。
transition-duration：规定过渡效果话费的时间，默认是0。语法：transition-duration: time;，time规定完成过渡效果需要花费的时间。
transition-timing-function：规定过渡效果的时间曲线，默认是ease。语法：transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);，linear=规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0,0,1,1)）,ease=规定慢速开始，然后变快，然后慢速结束的过渡效果，ease-in=规定慢速开始，ease-out=规定以慢速结束，ease-in-out=规定以慢速开始和结束的过渡效果，cubic-bezier(n,n,n,n)=在cubic-bezier函数中定义自己的值，可能的值是0至1之间的数值。
transition-delay：规定过渡效果何时开始，默认是0。语法：transition-delay: time;， time表示规定在过渡效果开始之前需要等待的时间。

8、动画

如需在CSS3中创建动画，需要学习@keyframes规则。
@keyframes规则用于创建动画，在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
另外还需要把@keyframes捆绑到某个选择器。通过规定至少以下两项CSS3动画属性，即可将动画绑定到选择器：

规定动画的名称
规定动画的时长

可是使用关键词“from”和“to”, 也可以使用百分比来规定变化的时间。
语法：@keyframes: animationname { keyframes-selector {css-styles;} }。animation-name表示动画的名称（必需）；keyframes-selector表示动画时长的百分比（必需），合法的值：0-100% | from (与0%相同) | to(与100%相同)；css-styles表示一个或多个合法的CSS样式属性（必需）

其他动画属性有：

animation：所有动画属性的简写属性，除了animation-play-state属性
animation-name：规定你@keyframes动画的名称
animation-duration：规定动画完成一个周期所花费的秒或毫秒，默认为0
animation-timing-function：规定动画的速度曲线，默认是“ease”
animation-delay：规定动画何时开始，默认是0
animation-iteration-count：规定动画被播放的次数，默认是1
animation-direction：规定动画是否在下一周期逆向地播放，默认是normal
animation-play-state：规定动画是否正在运行或暂停，默认是running。值有paused表示暂停，running表示动画正在播放。
animation-fill-mode：规定对象动画时间之外的状态。语法：animation-fill-mode: none | forwards | backwards | both;，none表示不改变默认行为；forwards表示当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）；backwards表示animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）；both表示向前和向后填充都被应用。

9、多列

通过多列属性，可以对文本内容进行多列布局。

column-count：规定元素应该被分隔的列数
column-fill：规定如何填充列
column-gap：规定列之间的间隔
column-rule: 设置所有column-rule-*属性的简写属性
column-rule-color：规定列之间规则的颜色
column-rule-style：规定列之间规则的样式
column-rule-width：规定列之间规则的宽度
column-span：规定元素应该横跨的列数
column-width: 规定列的宽度
columns：规定设置column-width和column-count的简写属性

10、用户界面

新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等

box-sizing：允许您以确切的方式定义适应某个区域的具体内容。例如，假如您需要并排放置两个带边框的框，可通过将box-sizing设置为“border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框盒内边距放入框中。
outline-offset：对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
resize：规定是否可有用户对元素的尺寸进行调整

测试例子见demo：https://github.com/xiaotanit/Tan_HtmlDemo