CSS高级属性（四）

最新推荐文章于 2023-02-09 22:09:43 发布

~莫~言~

最新推荐文章于 2023-02-09 22:09:43 发布

阅读量287

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/zcq125521/article/details/88861447

版权

前端专栏收录该内容

18 篇文章 3 订阅

订阅专栏

CSS3可分为：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。

CSS3已完全向后兼容。

CSS边框和圆角

transform：可以旋转、缩放、倾斜、平移的元素；

border-radius：圆角；

单独分离：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

左上角，右上角，右下角，左下角。
第一个值：左上角, 第二个值：右上角、左下角，第三个值：右下角
第一个值：左上角、右下角，第二个值：右上角、左下角
四个圆角值相同

box-shadow：阴影；投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色

border-image:边框图片；

CSS背景

兼容浏览器

background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */

background-image：多个图片路径；

background-size：设置图片大小

background-position：为多个图片路径设定位置；

background-repeat：为多个路径设置图片显示是否重复；

background-origin：指定图像的区域

background-clip:指定位置开始绘制。注意：背景颜色只能设置一个

background:图片路径显示位置是否重复，图片路径显示位置是否重复··········

CSS渐变色

css有两种类型的渐变：线性渐变和径向渐变

线性渐变：创建一个线性渐变，至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）

background：linear-gradient(颜色···········) 默认从上到下·

background：linear-gradient(to right,颜色···········) 从左到右·

background：linear-gradient(to left,颜色···········) 从右到左·

background：linear-gradient(to top left ,颜色···········) 从右下到左上·

也可以按照角度来渐变

background: linear-gradient(0deg, red, blue);

重复的线性渐变：background: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变：至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，也可以指定渐变的中心、形状、大小。默认渐变的中心是 center，渐变的形状是 ellipse（椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

background: radial-gradient(位置,[形状], 颜色【百分比】··················);

CSS文本效果

文本属性：

text-shadow：偏移量向下大小模糊度颜色
box-shadow：使用于盒子阴影
word-wrap：break-word换行
word-break：单词拆分换行属性指定换行
white-space:处理元素中的空白

CSS字体

@font-face
{
	font-family: myFirstFont;
	src: url('Sansation_Light.ttf')
		,url('Sansation_Light.eot'); /* IE9只支持eot格式的字体 */
}

div
{
	font-family:myFirstFont;
}

font-family：必需，规定字体的名称

src：定义字体的url；必需

font-stretch、font-style、font-weight、Unicode-range 分别是如何拉伸字体、字体样式、字体粗细、支持Unicode字符范围

CSS 2D转换

转换的效果是让某个元素改变形状、大小和位置。

matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

3D 转换方法

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

CSS过渡

transition：过度属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>过渡</title>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>
</html>

~莫~言~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS高级属性（四）

CSS3可分为：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。CSS3已完全向后兼容。CSS边框和圆角transform：可以旋转、缩放、倾斜、平移的元素；border-radius：圆角；单独分离：border-top-left-radius、border-top-right-radius、border-bottom-right-radius...
复制链接

扫一扫