由于各种版本浏览器兼容性问题, 所以很多 CSS3 属性效果是否生效还要以运行结果为准 !
目录结构
- CSS 篇
- media 查询
- 字体引用
- 常用样式收集
- 浏览器滚动条样式
- 对象元素添加倒影
- filter 滤镜
- 正片叠底
- pointer-events
- 背景色渐变
- border-img 图片边框设置
- 遮罩层
- calc 计算属性
- 移动端浏览器 去除高亮设置
- 文本内容操作
- 文本超出显示区域省略号代替
- 文本强制换行
- 文字阴影
- 文字描边
- 文字渐变色
- div 文字分栏
- 改变选中文字背景色
- 禁止选中文字
- CSS3 动效属性
- 元素背向屏幕不可见
- 3D 视角
- 3D 子元素脱离父元素束缚
- transform 变换属性
- transition 过渡属性
- animation 动画属性
- CSS 执行序列帧 动效
- Less 篇
- 循环
CSS 篇
★ media 查询
@media screen and (min-height:415px) and (max-height:480){
body{
background: #ff0000;
}
}
当屏幕高度在 415 - 480 像素之间时, body 背景色为 红色
★ 字体引用
@font-face {
font-family: "fzcqgbk"; /* 需要引用加载字体的名字 */
src: url("../font/fzcqgbk.eot"); /* IE9 */
src:url("../font/fzcqgbk.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("../font/fzcqgbk.woff") format("woff"), /* chrome、firefox */
url("../font/fzcqgbk.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
url("../font/fzcqgbk.svg#fzcqgbk") format("svg"); /* iOS 4.1- */
font-style: normal;
font-weight: normal;
}
应用场景 可控范围内的文字需要特殊字体显示
例如: 显示特殊字体的 0-9 Aa-Zz
【 附 】 Fontmin 软件链接 http://ecomfe.github.io/fontmin/#banner ；可以将需要的字单独打包成字体包
-------------------- CSS3 常用样式收集 --------------------
★ 修改浏览器 滚动条样式
{body}::-webkit-scrollbar {width: 12px;} /* 滚动条宽度 */
{body}::-webkit-scrollbar-track { -webkit-border-radius:10px; border-radius:10px; background:#DDDDDD; } /* 滚动条轨道样式 */
{body}::-webkit-scrollbar-thumb { -webkit-border-radius:10px; border-radius:10px; background:#ff0000; } /* 滚动条滑块样式 */
大多部分浏览器都支持，{body} 表示需要改变滚动条样式控件的 ID 或者 类名
例如: #contBox::-webkit-scrollbar {width: 12px;}
★ 添加倒影 ----- 只对 webkit 内核浏览器有效
{
-webkit-box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,0.5));
}
语法解释 box-reflect: {倒影位置} {对象元素与倒影间距} {更真实的图片倒影}
{倒影位置} : none ----> 无倒影
above ----> 指定倒影在对象的上边
below ----> 指定倒映在对象的下边
left ----> 指定倒映在对象的左边
right ----> 指定倒映在对象的右边
{倒影与对象元素间距} : 可以设置像素值 百分比 等, 也可以是负值
{更真实的图片倒影} : none ----> 无遮罩图像
url ----> 使用绝对或相对地址指定遮罩图像
linear-gradient ----> 使用线性渐变创建遮罩图像
radial-gradient ----> 使用径向渐变创建遮罩图像
repeating-linear-gradient ----> 使用重复的线性渐变创建遮罩图像
repeating-radial-gradient ----> 使用重复的径向渐变创建遮罩图像
★ filter 滤镜属性
{
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
}
none ----> 默认值没有效果
blur(5px); ----> 设置高斯模糊; 0px 最清晰, 值越大越模糊, 不接受百分比值
brightness(); ----> 给图片应用一种线性乘法, 改变图片明暗度; 0% 纯黑色
contrast(); ----> 调整图像的对比度。 0% 图片全黑/灰，100% 图像不变，值可以超过 100%，默认值为 1
drop-shadow({h-shadow} {v-shadow} {blur} {spread} {color}); 给图像设置一个阴影效果。阴影是合成在图像下面，可以有如下属性
{h-shadow} ----> (必须) 设置X轴阴影偏移,单位 px; +0 右偏移 -0 左偏移
{v-shadow} ----> (必须) 设置Y轴阴影偏移,单位 px; +0 下偏移 -0 上偏移
{blur} ----> (选填) 阴影模糊度 默认为 0, 不允许负值
{spread} ----> (选填) 设置阴影大小 +0 阴影变大, -0 阴影变小 【 此属性支持性巨差,建议不要使用 】
{color} ----> (选填) 设置阴影颜色
grayscale(); ----> 将图像转换为灰度图像 0% 原图, 100% 全灰, 默认值 0
hue-rotate(); ----> 色相调整; 给图像应用色相旋转; 默认值 0deg; 0 - 360deg 相当于旋转了一个周期
invert(); ----> 反转输入图像色值。值定义转换的比例, 默认值 0%; 100% 则完全翻转原图像色值 【 计算规则，255 - 原图RGB色值 】
opacity(); ----> 对象透明度设置, 0% 完全透明, 默认值 1 或者 100%
saturate(); ----> 转换图像饱和度,值定义转换的比例 默认值 1, 100% 原图
sepia(); ----> 将图像转换为深褐色。值定义转换的比例。 默认值 0, 0% 原图
url(); ----> URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。
介绍与实例 http://www.runoob.com/cssref/css3-pr-filter.html
★ 正片叠底
{
mix-blend-mode: multiply;
}
★ pointer-events
{
pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
}
设置或检索在何时成为属性事件的target。
★ 背景色渐变
{
background: linear-gradient(direction, color-stop1, color-stop2, ...); // 线性渐变
background: radial-gradient(color-stop1, color-stop2, ...); // 径向渐变
}
direction：用角度值指定渐变的方向
color-stop1 ... ： 用于指定渐变的 起止颜色
// 背景色 线性渐变示例
{
background:-webkit-linear-gradient(to left,rgba(220,35,30,1),rgba(248,227,0,1),rgba(40,168,200,1));/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(to left,rgba(220,35,30,1),rgba(248,227,0,1),rgba(40,168,200,1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(to left,rgba(220,35,30,1),rgba(248,227,0,1),rgba(40,168,200,1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to left,rgba(220,35,30,1),rgba(248,227,0,1),rgba(40,168,200,1)); /* 标准的语法（必须放在最后） */
}
★ border-image 属性
将图片规定为 包围 div 元素的边框
{
border-image: {source} {slice} {width} {outset} {repeat|initial|inherit};
}
{source} ----> 用于指定要用于绘制边框的图像的位置，可以看做是图片的 url
{slice} ----> 图像边界内向偏移
{width} ----> 图像边界的宽度
{outset} ----> 用于指定在边框外部绘制 border-image-area 的量
{repeat|initial|inherit} ----> 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。
★ 遮罩层
{
-webkit-mask-size:100% 100%;
-webkit-mask-image:url(img/zya-txt.png);
}
mask 属性已经越来越正规化, 所以有一系列 mask-*** 的属性,在此便不一一列举, 下面附 张鑫旭大大的 mask 详解篇链接
http://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/
★ calc() 计算属性
calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值
// height : calc ( 父容器可见区域高度 - 100px )
{
height : calc( 100% - 100px );
}
// height :calc ( 父容器可见区域高度 - 1rem ) .less 中使用写法如下
{
height:calc(~"100% - 1rem");
}
calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算。
★ 浏览器高亮设置
{
-webkit-tap-highlight-color:transparent;
-moz-tap-highlight-color:transparent;
-ms-tap-highlight-color:transparent;
-o-tap-highlight-color:transparent;
tap-highlight-color:transparent;
}
此属性可以将 移动端浏览器点击超链接或者按钮时的高亮色设置为 透明色
-------------------- CSS3 文字文本样式 --------------------
★ 文字超出显示区域设置
// 单行文本文字超出 用省略号代替
{
text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}
// 多行文字超出 用省略号代替
{
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
-webkit-line-clamp 设置可显示行数
★ 文字强制换行
{
word-break: normal;
word-wrap:break-word;
}
★ 文字阴影
// 此属性也可以用来制作 文字外发光效果
{
text-shadow:{h-shadow} {v-shadow} {blur} {color};
}
{h-shadow} ----> (必须) 水平阴影的位置
{v-shadow} ----> (必须) 垂直阴影的位置
{blur} ----> (可选) 文字阴影模糊的距离
{color} ----> (可选) 阴影颜色
★ 文字描边
{
-webkit-text-stroke-width:1px;
-webkit-text-stroke-color:#ff0;
}
★ 文字渐变色
{
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255, 0, 0, 1)), to(rgba(0, 0, 255, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
★ 文字分栏
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
★ 改变选中文字颜色/背景色
{
{.demo1}::selection{ color:#fff; background:#ff5e2c; }
{.demo1}::-moz-selection{ color:#fff; background:#ff5e2c; }
{.demo1}::-webkit-selection{ color:#fff; background:#ff5e2c; }
}
{.demo1} ----> 需要设置改变选中文字背景颜色的 类名 或者 ID
::selection 选择器匹配被用户选取的选取是部分, 只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。
★ 禁止选中复制文本文字
{
user-select:
none // 文本不能被选择
text // 可以选择文本
all // 当所有内容作为一个整体时可以被选择,如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element // 可以选择文本，但选择范围受元素边界的约束
}
IE6 - 9 不支持该属性, 但是可以使用标签属性 onselectstart="return false;" 来达到同样的效果
Opera 使用标签属性 unselectable="on" 来达到同样的效果 on/off 不可选中/可选中
-------------------- CSS3 动效篇 --------------------
★ 元素背向屏幕不可见
{
backface-visibility: visible | hidden;
}
visible : 默认值, 元素背向屏幕可见
hidden : 元素背向屏幕不可见
如果需要制作 卡牌翻转效果, 需要给父元素添加 -webkit-transform-style:preserve-3d; 属性
★ 3D 视角 ----- 给父元素添加
{
-webkit-perspective:1000;
}
★ 3D 子元素脱离父元素束缚 ----- 给父元素添加
{
transform-style: preserve-3d;
}
★ transform 属性
// transform 属性向元素应用 2D 或 3D 转换, 该元素允许我们对元素进行旋转、缩放、移动、和倾斜。
{
transform: none | transform-functions;
}
以下所涉及到的 X Y Z 轴 均以需要改变的对象元素的 自身计算
none ----> 不进行转换
rotate(0deg) ----> 2D，旋转，默认以 Z 轴旋转，默认值 0deg， +0 顺时针旋转， -0 逆时针旋转
rotateX(0deg) -----> 以X轴旋转
rotateY(0deg) -----> 以Y轴旋转
rotateZ(0deg) -----> 以Z轴旋转
rotate3d(x,y,z,deg) ----> 3D旋转，默认值（0，0，0，0deg）
例：rotate3d(1,0,-1,180deg) -----> 以 X 轴正向旋转 180 度, 并以 Z 轴逆时针旋转 180 度
scale(x,y) ----> 2D, 缩放，默认值（1，1），此处的值可以是负数，但是计算时应该是取的 绝对值
例：scaleX(1.5) -----> 以 X 轴放大到原对象的 1.5 倍
scale3d(x,y,z) ----> 3D, 缩放
translate(x,y) ----> 2D，移动, 原对象位置基础上实现 移动，单位：像素 或 百分比
translateX(0px) -----> +0 X 轴向右移动，-0 X 轴向左移动
translateY(0px) -----> +0 Y 轴向下移动，-0 Y 轴向上移动
translateZ(0px) -----> +0 Z 轴向屏幕外移动，-0 Z 轴向屏幕内移动
translate3d(x,y,z) ----> 3D转换, 原对象位置基础上实现 移动, 需要给父元素添加 transform-style: preserve-3d;
skew(x,y) ----> 2D 倾斜，单位 deg;
skewX(0deg) -----> 以X轴倾斜
skewY(0deg) -----> 以Y轴倾斜
{
transform-origin: x-axis y-axis z-axis;
}
该属性允许您更改转换元素的位置。
X 轴 Y 轴 可能的值 【 left，center，right，length，% 】
Z 轴 可能的值 length
★ transition 过渡属性
{
transition: {property} {duration} {timing-function} {delay};
}
{property}：指定需要过渡效果的属性
{duration}：完成过渡的时间
{timing-function}：指定 transition 效果的转速曲线
{delay}：定义 过渡效果开始的时间，即延迟执行时间
例：transition : width 3s linear 2s; ----> 当对象元素宽度改变,该元素会在 3s 内平滑的将对象元素宽度变为改变后的值, 过渡效果延迟 2s 执行
★ animation 属性
{
animation: {name} {duration} {timing-function} {delay} {iteration-count} {direction};
}
{name}：规定需要绑定到选择器的 keyframe 名称
{duration}：规定完成一次动画所需要的时间 单位 秒
{timing-function}：规定动画的速度曲线; 取值如下
linear ------> 动画从头到尾的速度是相同的
ease ------> 默认。动画以低速开始，然后加快，在结束前变慢
ease-in ------> 动画以低速开始
ease-out ------> 动画以低速结束
ease-in-out ------> 动画以低速开始和结束
cubic-bezier(n,n,n,n) ------> (我还没测试过)
{delay}： 规定动画开始之前的延迟
{iteration-count}： 规定动画应该播放的次数
{direction}：规定是否应该轮流反向播放动画
★ CSS 执行序列帧 动效
{
animation: animeName 1s steps(1, start) infinite;
}
-------------------- LESS 篇 --------------------
★ less中的循环
.a(@c) when ( @c <= 5 ){
.b-@{c}{
width: 100%; height: @c px ; font-size: 10px;
background: url("./img/emoji-@{c}.png");
}
.a( @c + 1 );
}
.a(1);
此处的 @c 不需要提前声明
如有遗漏、描述不清楚或者错误的地方还请大家帮忙指出 (✪ω✪)
网友评论