css兼容性判断
- 通过js遍历html标签上的style列表，来判断浏览器对样式的兼容
function supportCss3(style) {
var prefix = ['webkit', 'Moz', 'ms', 'o'],
i,
humpString = [],
htmlStyle = document.documentElement.style,
//将-x替换为X，完成小驼峰修改 ------ (\w：用于匹配字母，数字或下划线字符； \W：用于匹配所有与\w不匹配的字符)
_toHumb = function (string) {
return string.replace(/-(\w)/g, function ($0, $1) {
console.log($0,$1);
return $1.toUpperCase();
});
};
//被监测的样式
for(i in prefix){
humpString.push(_toHumb(prefix[i] + '-' + style));
}
humpString.push(_toHumb(style));
//查看html标签是否含有被监测样式
for(i in humpString){
if (humpString[i] in htmlStyle){
return true
}else{
return false;
};
};
};
console.log(supportCss3('transform'));
- 通过js来判断window全局对象CSS来判断样式兼容 -- boolValue = CSS.supports(propertyName, value)
window.CSS.supports('color','#FFF')
const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('color','#FFF');
if (isSupported) {
/* supported */
} else {
/* not supported */
}
- 通过modernizr库来判断样式是否存在
通过下载http://modernizr.cn/download/，在window上挂载一个全局对象Modernizr，来判断浏览器对标签，属性，样式的支持情况。
//-- 如判断样式是否存在：
Modernizr.testProp('transform'); //true
//-- 判断事件是否支持：
Modernizr.hasEvent('click', document.getElementsByTagName('body')[0]); //true
//-- 判断属性是否支持：
Modernizr.testProp('font'); //true
- 媒体查询方式补全
@supports ( (color:'#FFF')) {
/* supported */
}
@supports ( not (color:'#FFF')) {
/* not supported */
}
css3 前缀自动补全
- 安装：
通过Visual Studio Code安装插件Autoprefixer - 配置：
通过设置 - 扩展设置 - 点击 Autoprefixer:Options 在setting.json中编辑
"autoprefixer.browsers": [
"ie >= 6",
"firefox >= 8",
"chrome >= 24",
"Opera>=10"
]
- 使用
在需要使用的css文件中，点击F1 - 搜索Autoprefixer CSS，点击，即可完成CSS兼容
css3变量使用
定义变量，以'--'开头，连接字符串，且大小写敏感
- 字符串变量
//全局范围内，样式级别最低
:root{
--primary: #FFF;
}
//局部范围内，样式级别高于全局
.main {
--primary: #000;
}
需要与单位搭配使用情况下：
- 情况一，如果变量是数字类型，需要calc函数包裹，在括号内定义变量
:root{ --wnum:50; }
.box { width: calc(var(--wnum)*1px); }
- 情况二，如果变量是伪字符串，那么可以直接使用
:root{ --wnum:50px; }
.box { width: var(--wnum); }
- 响应式定义值
@media screen and (min-width: 768px) {
body {
--primary: #F7EFD2;
--secondary: #7F583F;
}
}
取值
- 一般取值
.txt {
color: var(--primary);
}
通过脚本控制css变量
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary');
常用零碎
整理记录一些零散的CSS样式
- 样式重置
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
-webkit-tap-highlight-color: transparent;
}
html { font-size:26.6667vw;
/*禁止浏览器的文本溢出算法*/
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
/*对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { margin:0; font-size:16px;
font-family:Helvetica,Arial,Tahoma,Georgia,'PingFangSC-Regular','Hiragino Sans GB',sans-serif;
word-wrap:break-word;
}
li { list-style:none;}
a { text-decoration:none;}
h1,h5,h6,ul,li,p { margin:0; padding:0;}
h1,h5,h6 { font-weight:normal; }
/*clearfix*/
.clear { clear: both; width: 0; height: 0; padding:0; margin:0; overflow: 0; font-size: 0; line-height: 0;}
.clearfix { zoom:1; _height:1px;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
※ 表格样式初始化
table {
border-spacing: 0; /*表格相邻单元格的边框间的距离设置为 0*/
border-collapse: collapse; /*表格的边框是否被合并为一个单一的边框*/
table-layout:fixed; /*默认auto, 严格按照指定宽度显示表格*/
}
0-1. 重置样式说明
- 固定基础宽高的盒子，调整padding、border，不用再反复二次手动修改宽高值，渲染宽高时候会自动从基础值里刨除padding与border, 它们的相加总和与基础宽高一样
- 简而言之，就是padding与border会向内挤压宽高，保持宽高不溢出，造成向外扩展
/*IE8以上 doctype声明以在浏览器中触发标准模式*/
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
- 浏览器自带的触摸点击元素半透明背景，重置
/*这个属性只用于iOS (iPhone和iPad) 链接或者元素点击，它就会出现一个半透明的灰色背景*/
-webkit-tap-highlight-color: transparent;
- 禁止浏览器的文本溢出算法
/*禁止浏览器的文本溢出算法*/
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
- 对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服
/*对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- 常用移动端初始化字体 （见淘宝移动端首页）
/*移动端字体*/
font-family:'Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft Yahei,sans-serif'
- css3 背景图平铺
/*icon相关*/
.bgCover {
-webkit-background-size:cover; -moz-background-size:cover; -ms-background-size:cover; -o-background-size:cover; background-size:cover;
background-repeat:no-repeat; background-position:center center;
}
0-2. 修改圈选文字的背景色
p::selection {
background:pink;
color:white;
}
::-moz-selection {
background:#ccc;
color:#ff645d;
}
::-webkit-selection {
background:#ccc;
color:#ff645d;
}
页面不被点击
pointer-events -https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target隐藏默认表单样式，如select右侧箭头；易可设置其他值，完成元素外观改变
appearance -https://developer.mozilla.org/zh-CN/docs/Web/CSS/appearance
appearance: normal|icon|window|button|menu|field;
.hideDefaultStyle { appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; -webkit-appearance:none; }
2-2. 输入框placeholder样式
input::-webkit-input-placeholder { color: #666; } /* Chrome/Opera/Safari */
input:-moz-placeholder { color: #666; } /* Firefox 18- */
input::-moz-placeholder { color: #666; } /* Firefox 19+ */
input:-ms-input-placeholder { color: #666; } /* IE 10+ */
隐藏滚动条
::-webkit-scrollbar { display: none; }
*::-webkit-scrollbar { display: none; }比例与固定值的样式风格
如：宽度 为100%减去95像素
width: calc(100% - 95px);改变外观
div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}
浏览器支持
所有主流浏览器都不支持 appearance 属性。
Firefox 支持替代的 -moz-appearance 属性。
Safari 和 Chrome 支持替代的 -webkit-appearance 属性
- 图片CSS3裁切方式 object-fit
object-fit的可能值有：fill, contain, cover, none, scale-down
示例：
<!--css-->
img { object-fit:cover; object-position:50% 50%; }
<!--html-->
<picture>
<source srcset="large.jpg" media="(min-width: 800px)" />
<source srcset="medium.jpg" media="(min-width: 500px)" />
<img src="small.jpg" />
</picture>
示例：
图片使用样式宽高缩小后，显示一侧方向盛满，另一侧方向被居中裁切
img { width: 200px; height: 200px; object-fit: cover; }
图片非拉伸裁切
- 横向布局
描边嵌套拼接，且支持外边距溢出，支持折行，兼容 IE+
代码：
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>列表</title>
<style type="text/css">
html,body{font:Microsoft YaHei,"微软雅黑",Arial,Helvetica,sans-serif 12px/1.5em}
body,ul,li,p{margin:0;padding:0}
li{list-style:none}
a{text-decoration:none}
#warp{width:960px;padding:0 10px 10px;background:#f1f1f1;margin:10px auto 0}
#warp .list1{width:100%;overflow:hidden}
#warp .list1 ul{width:980px;overflow:hidden}
#warp .list1 li{float:left;width:231px;margin:10px 10px 0 0;border-width:1px 0 0 1px;border-style:solid;border-color:#ccc}
#warp .list1 li .box {border-width:0 1px 1px 0;border-style:solid;border-color:#ccc;min-height:200px;padding:70px
0;background:#FFF;font-size:20px;color:#333;text-align:center}
.p1{text-align:center;margin-top:10px}
</style>
</head>
<body><div id="warp"><!--list1--><div class="list1"><ul><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li><li><a href="#"><div class="box">图片</div></a></li></ul></div></div><p class="p1">下一个模块</p></body>
</html>
-
flex兼容布局
flexBox -- flexBox，flexXC -- 横向居中，flexYC -- 垂直居中，flex_between -- 两侧抵近平铺，flex_wrap -- 折行
chrome开发者工具flex可视化操作
.flexBox { display:-webkit-flex; display:-moz-flex; display:-ms-flexbox; display:-webkit-box; display:-moz-box; display:flex; }
.flexXC { -webkit-box-pack:center; -ms-flex-pack:center;
-webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; -o-justify-content:center; justify-content:center;}
.flex_XL {-webkit-box-pack:start; -moz-flex-pack:start; -ms-flex-pack:start; -o-flex-pack:start; box-pack:start; justify-content:flex-start; }
.flex_XR { -webkit-box-pack:end; -moz-flex-pack:end; -ms-flex-pack:end; -o-flex-pack:end; box-pack:end; justify-content:flex-end;}
.flex_between {-webkit-box-pack:justify; -ms-flex-pack:justify;
-webkit-justify-content:space-between; -moz-justify-content:space-between; -ms-justify-content:space-between; -o-justify-content:space-between; justify-content:space-between;}
.flex_around {-webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; -o-justify-content: space-around; justify-content: space-around;}
.flex_wrap { -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; -o-flex-wrap:wrap; flex-wrap:wrap;}
.flexYC { -webkit-box-align:center; -ms-flex-align:center;
-webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; -o-align-items:center; align-items:center;
}
/*垂直几个高度相同*/
.flexYAllHeight { -webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch; }
.flexYT { -webkit-box-align:start; -ms-flex-align:start; align-items:flex-start; }
.flexYB { -webkit-box-align:end; -ms-flex-align:end; align-items:flex-end; }
8-1. flex布局
display:-webkit-flex; display:-moz-flex; display:-ms-flexbox; display:-webkit-box; display:-moz-box; display:flex;
8-1-2. flex与box的区别与联系
- box 2009年出现，且已经过时，flex 2012年出现
- 功能类似，但是flex为当下各高级浏览器支持的，主流布局方案
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
8-2. 水平居中、垂直居中
-webkit-box-pack:center; -ms-flex-pack:center;
-webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; -o-justify-content:center; justify-content:center;
-webkit-box-align:center; -ms-flex-align:center;
-webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; -o-align-items:center; align-items:center;
8-3. 两侧均分排版
-webkit-box-pack:justify; -ms-flex-pack:justify;
-webkit-justify-content:space-between; -moz-justify-content:space-between; -ms-justify-content:space-between; -o-justify-content:space-between; justify-content:space-between;
8-4. 两侧均分排版 (均分间距)
-webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; -o-justify-content: space-around; justify-content: space-around;
8-5. 朝向 横向从左至右
-webkit-flex-direction:row; -moz-flex-direction:row; -ms-flex-direction:row; -o-flex-direction:row; flex-direction:row;
8-6. 朝向 横向从上至下
-webkit-flex-direction:column; -moz-flex-direction:column; -ms-flex-direction:column; -o-flex-direction:column; flex-direction:column;
8-7. flex:1
.flex1{ -prefix-box-flex: 1; -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; }
8-8. 当使用space-between时候，如果不够满一列，中间会出现空白区域
解决方法：
列表最后通过伪类(如果一行两列)，或者手动添加满一列(一行大于两列)，高度为空，visibility:hidden即可，如此依赖解决中间空白的问题
- 颜色渐变
background-image: -webkit-linear-gradient(to right, #5597f5, #5580e9);
background-image: -moz-linear-gradient(to right, #5597f5, #5580e9);
background-image: -ms-linear-gradient(to right, #5597f5, #5580e9);
background-image: -o-linear-gradient(to right, #5597f5, #5580e9);
background-image: linear-gradient(to right, #5597f5, #5580e9);
background-image: -webkit-gradient(linear,left,right,from(#5597f5),to(#5580e9));
background-color: #5597f5;
background: #353535;/* Old browsers */
background: -moz-linear-gradient(top, #484848 0%, #353535 100%);/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #484848), color-stop(100%, #353535));/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #484848 0%, #353535 100%);/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #484848 0%, #353535 100%);/* Opera 11.10+ */
background: -ms-linear-gradient(top, #484848 0%, #353535 100%);/* IE10+ */
background: linear-gradient(to bottom, #484848 0%, #353535 100%);/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#484848', endColorstr='#353535',GradientType=0 );/* IE6-9 */
- css3 半弧，1/4圆弧
css
div { margin:10px;}
/*开口_半个圆弧*/
.box1 { display:block; width:100%; overflow:hidden;}
.box1 .floatL { float:left;}
.halfCircleBase { border:10px solid #F60; }
/*左*/
.halfCircle_left { width:100px; height:200px; border-radius:100% 0 0 100%/50%; border-right:none; }
.halfCircle_left_close { width:100px; height:200px; border-radius:100% 0 0 100%/50%; }
/*右*/
.halfCircle_right { width:100px; height:200px; border-radius:0 100% 100% 0/50%; border-left:none; }
.halfCircle_right_close { width:100px; height:200px; border-radius:0 100% 100% 0/50%; }
/*上*/
.halfCircle_top { width:200px; height:100px; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom:none; }
.halfCircle_top_close { width:200px; height:100px; border-radius: 50% 50% 0 0/100% 100% 0 0; }
/*下*/
.halfCircle_btm { width:200px; height:100px; border-radius:0 0 50% 50%/0 0 100% 100%; border-top:none; }
.halfCircle_btm_close { width:200px; height:100px; border-radius:0 0 50% 50%/0 0 100% 100%; }
/*四分之一圆弧*/
.circleBase { width:100px; height:100px; background:#F60; }
.circleBase:after { display:block; width:100%; height:100%; content:''; background-color:#FFF; }
/*左上*/
.circleBase_lt { padding:10px 0 0 10px; border-radius:100% 0 0 0; }
.circleBase_lt:after { border-radius:100% 0 0 0; }
/*右上*/
.circleBase_rt { padding:10px 10px 0 0; border-radius:0 100% 0 0; }
.circleBase_rt:after { border-radius:0 100% 0 0; }
/*右下*/
.circleBase_rb { padding:0 10px 10px 0; border-radius:0 0 100% 0; }
.circleBase_rb:after { border-radius:0 0 100% 0; }
/*左下*/
.circleBase_lb { padding:0 0 10px 10px; border-radius:0 0 0 100%; }
.circleBase_lb:after { border-radius:0 0 0 100%; }
html
<div class="box1">
<div class="floatL halfCircleBase halfCircle_left"></div>
<div class="floatL halfCircleBase halfCircle_left_close"></div>
<div class="floatL halfCircleBase halfCircle_right"></div>
<div class="floatL halfCircleBase halfCircle_right_close"></div>
<div class="floatL halfCircleBase halfCircle_top"></div>
<div class="floatL halfCircleBase halfCircle_top_close"></div>
<div class="floatL halfCircleBase halfCircle_btm"></div>
<div class="floatL halfCircleBase halfCircle_btm_close"></div>
</div>
<div class="box1">
<div class="floatL circleBase circleBase_lt"></div>
<div class="floatL circleBase circleBase_rt"></div>
<div class="floatL circleBase circleBase_rb"></div>
<div class="floatL circleBase circleBase_lb"></div>
</div>
效果图
圆角
- 斜体背景上的文字
两层包裹，做正反斜切即可
<a class="skewBtn" style="display: inline-block;padding: 5px 10px;background: #F60;font-size: 12px;line-height: 1.5em;color: #FFF;transform: skewX(-15deg);">
<span class="insetTxt" style="transform: skew(15deg);display: inline-block;">舰桥</span>
</a>
12-2. 文字水平垂直布局属性 - writing-mode
writing-mode: horizontal-tb; //-- 水平布局
writing-mode: vertical-lr; //-- 垂直布局 左侧开始
writing-mode: vertical-rl; //-- 垂直布局 右侧开始
- 元素不对指针事件做出反应
.demo {
// 如果按tab能选中该元素，如button，然后按回车还是能执行对应的事件，如click。
pointer-events: none;
cursor: default;
}
- 为了兼容IE达到 pointer-events: none;的效果
通过事件委托的方式，针对a标签来阻止
function handler(e){
e = e || window.event;
var target = e.target || e.srcElement;
if (target.tagName.toLowerCase() === 'a')
{
if (!e.preventDefault){
//IE quirks
e.returnValue = false;
e.cancelBubble = true;
}
e.preventDefault();
e.stopPropagation();
}
};
//针对页面上的a标签
if (window.addEventListener){
window.addEventListener('click', handler, false);
}else{
window.attachEvent('onclick', handler);
}
13-2. 禁止用户选择
.wrap {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
- 3D旋转180deg 背面不可见
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome 和 Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
- 阻止微信浏览器，长按图片弹出的系统菜单
- 通过样式设置，但元素不能成为鼠标事件的target
img{
pointer-events:none;
-webkit-pointer-events:none;
-ms-pointer-events:none;
-moz-pointer-events:none;
}
- 通过设置一个透明的mark层，遮盖在图片上方
.imgMark { position:absolute; left:0; top:0; z-index:10; display:block; width:100%; height:100%; background:transparent; }
- 解析文本换行
white-space: normal;
white-space: nowrap;
white-space: pre; //不换行 保留换行符
white-space: pre-wrap; //有换行 保留换行符 (只对中文起作用，强制换行)
white-space: pre-line; //有换行 保留换行符
white-space: break-spaces //有换行 保留换行符
word-break:break-all; // (只对英文起作用，以字母作为换行依据)
word-wrap:break-word; // (只对英文起作用，以单词作为换行依据)
pre-line 会删除行尾空格
pre-wrap、break-spaces 效果类似，区别在于行尾空格 一个挂起，一个换行
17-2. 文本两端对齐
.wrap {
text-align: justify;
text-justify: distribute-all-lines; //ie6-8
text-align-last: justify; //一个块或行的最后一行对齐方式
-moz-text-align-last: justify;
-webkit-text-align-last: justify;
}
- 文本溢出省略号
单行文本过多省略号
.ellipsisTxt { width:200rpx; overflow: hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space: nowrap;}
多行文本过多省略号 (line-clamp为行数，如下3行溢出后显示省略号)
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
- 隐藏浏览器滚动条默认样式
.demo::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.demo {
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
overflow-x: hidden;
overflow-y: auto;
}
- table可能需要的初始化
table{
border-collapse: collapse; //合并边框
table-layout: fixed; //阻止内容向外撑开所在列
}
- css3选择器 灵活使用
first-child first-child 表示选择列表中的第一个标签。
last-child last-child 表示选择列表中的最后一个标签
nth-child(3) 表示选择列表中的第 3 个标签
nth-child(2n) 这个表示选择列表中的偶数标签
nth-child(2n-1) 这个表示选择列表中的奇数标签
nth-child(n+3) 这个表示选择列表中的标签从第 3 个开始到最后。
nth-child(-n+3) 这个表示选择列表中的标签从 0 到 3，即小于 3 的标签。
nth-last-child(3) 这个表示选择列表中的倒数第 3 个标签。
- 图片异常加载兜底
<img onerror="this.src='url;this.onerror=null'" />
- 开启GPU加速
应用场景：
如果一个元素有fixed定位，那么在chrome内核浏览器下，可以防止抖动。
.demo {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/**或者**/
transform: rotateZ(360deg);
transform: translate3d(0, 0, 0);
}
- 页面动画闪烁(闪屏)问题
- 消除 transforms 或者 animations 可能会有的页面闪烁问题
webkit内核的浏览器中
.cube {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Other transform properties here */
}
- 消除transition闪屏问题
.demo {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
24-2. animation样式属性表
- 一般书写格式
animation: 3s ease-in 1s infinite reverse both running slideinAni;
animation: 动画时间 缓动方式 延迟时间 循环次数 播放帧执行顺序 播放结束位置 默认播放状态 动画名称;
参照表格
css3 animation参照表格
- 按阶段运动
//- 从无到有，需要提前补一帧距离
animation:someAni 4s steps(5,end) infinite;
//- 从第一帧到倒数第二帧，无需补充距离
animation:someAni 4s steps(4,start) infinite;
按阶段动画
- 字母大小写转换
p {text-transform: uppercase} // 将所有字母变成大写字母
p {text-transform: lowercase} // 将所有字母变成小写字母
p {text-transform: capitalize} // 首字母大写
p {font-variant: small-caps} // 将字体变成小型的大写字母
- 兼容较好的横向无限布局方案
.wrap {
white-space: nowrap;
}
.wrap .ele {
display: inline-block; white-space: nowrap;
}
- 渐变文字
<div class="text_signature " >一个学习前端知识的网站</div>
<style>
.text_signature {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #ec2239, #40a4e2,#ea96f5);
width: 320px;
}
</style>
- 通过box-shadow制作立体字体
color:#fff;
text-shadow:
0px 1px 0px #c0c0c0,
0px 2px 0px #b0b0b0,
0px 3px 0px #a0a0a0,
0px 4px 0px #909090,
0px 5px 10px rgba(0, 0, 0, 0.6);
- 文字描边
.stroke { -webkit-text-stroke: 1px greenyellow; text-stroke: 1px greenyellow; }
29-2. 文字模糊效果
.demo {
color: transparent;
text-shadow: #111 0 0 5px;
}
- 移动端1px边框渲染问题 (retina屏)
height: 1px; background: #dbdbdb; transform:scaleY(0.5);
- css3图片自适应object-fit
object-fit: fill | contain | cover | scale-down | none | initial | inherit;
常用的
- cover 保持原有尺寸比例。铺满容器但部分内容会溢出
- contain 保持原有尺寸比例。长边铺满，短边不会铺满容器
.demo { object-fit: cover; }
.demo { object-fit: contain; }
- 流体布局下图片占位，保持宽高比
图片的比例是 width/height的比例 如：4:3的图片 width:100%; height:75%;
.imgBox { position:relative; width:100%; height:0; overflow:hidden; padding-bottom:75%; font-size:0; line-height:0; }
.imgBox img { position:absolute; left:0; top:0; z-index:2; display:block; width:100%; }
- 扩大按钮热区
#btn { position:relative; display:inline-block; padding:5px 20px; line-height:30px; background:lightgreen; }
#btn::after { position:absolute; z-index:2; left:-5px; right:-5px; top:-5px; bottom:-5px; content:''; background:rgba(255,0,0,0.3); cursor:pointer;}
....
<div id="btn">按钮</div>
- 网页文本，选中文字颜色
css3 ::selection属性，该属性用于匹配元素中被用户选中或处于高亮状态的部分，
支持修改匹配元素的 color, background, cursor,和outline属性
兼容: IE9及以上
::-moz-selection {
color: gold;
background-color: red;
}
::selection {
color: gold;
background-color: red;
}
- 选择器使用
- 匹配第三个p标签
p:nth-of-type(3){background:red;} - 匹配第三个类名(btn)标签
.btn:nth-of-type(3){background:red;} - 匹配父节点下第二个标签，如果是p标签，则渲染为绿色
p:nth-child(2) {background:green;}
- 使用混合模式与滤镜，实现不规则蒙板遮盖效果 (IE不支持)
※ 混合模式：
使用规则： 子元素与父元素背景之间的遮盖关系
mix-blend-mode: normal;
mix-blend-mode: multiply; //--当蒙需要颠倒颜色时候，可以搭配 filter:invert(1) 与此(正片叠底)模式使用
mix-blend-mode: screen; //--蒙板上黑色区域，可以通过该(滤色)模式，镂空出下面内容
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
※ 滤镜 - filter
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()
- 色值取反
filter:invert(1) -- 反转输入图像，参数变化范围(0~1)
- 色调轮盘 - (可以操作颜色变化，范围(0-360)deg)
filter: hue-rotate(175deg);
- 阴影 - 参数值(左右，上下，阴影)
filter: drop-shadow(0px 7px 0 rgba(0,0,0,0.2));
- (图片、背景)模糊
-webkit-filter: blur(10px); /* Chrome, Opera */
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
- 仅背景模糊，不会影响到背景下面的图片
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
- 将图像转换为灰度图像 - (清明网站CSS)
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-filter:gray;
filter:gray;
-webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
filter:progid:dximagetransform.microsoft.basicimage(grayscale=1);
B站-灰色
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:gray!important;
filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter:grayscale(1);
注：
如果网站不生效，可以使用标准协议:
XHTML 1.0 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。
不允许框架集（Framesets）。
必须以格式正确的 XML 来编写标记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
或者使用HTML5协议
<!DOCTYPE html>
- 调整图片对比度
filter:contrast(数值); 数值范围，默认1
filter:contrast(1.5);
例：制作马赛克图片
主要使用语法：
第一，制作遮罩，上面有纵横的线段；
第二，图片增加对比度；
第三，图片添加马赛克滤镜；
/*css-马赛克*/
.msk::before { position:absolute; left:0; top:0; z-index:1000; width:100%; height:100%; content:'';
background-image:repeating-linear-gradient(180deg,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 10%,transparent 10%,transparent 90%,rgba(0,0,0,0.3) 90%,rgba(0,0,0,0.3) 100%),repeating-linear-gradient(90deg,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 10%,transparent 10%,transparent 90%,rgba(0,0,0,0.3) 90%,rgba(0,0,0,0.3) 100%);
background-size:8px 8px;
}
.msk img { filter:contrast(1.5); image-rendering: pixelated;}
/*html*/
<div class="half msk">
<img src="photo.gif" />
</div>
图片马赛克
- css3样式制作倒影 box-reflect
参数
倒影方向(above,below,left,right)，偏移量(数字，百分比)，遮罩类型(线性渐变,指定图片url)
.reflectBox { below 10 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3)); }
- 渐变滚动条
- linear-gradient
.loadingBox{ width:60%; height:30px; margin:10px auto 0; background-color:#FFF; border:1px #666 solid;
text-align:center; line-height:30px;text-transform: uppercase; font-size:20px; font-weight:bold; color:#FFF;
-webkit-border-radius:4px; webkit-border-radius:4px;
-webkit-background-image:linear-gradient(45deg,#63cc0c 25%,#f60 25%,#f60 50%,#63cc0c 50%,#63cc0c 75%,#f60 75%);
background-image:linear-gradient(45deg,#63cc0c 25%,#f60 25%,#f60 50%,#63cc0c 50%,#63cc0c 75%,#f60 75%);
-webkit-background-size:30px; background-size:30px;
-webkit-animation:runningAni 0.5s linear infinite;
animation:runningAni 0.5s linear infinite;
}
@-webkit-keyframes runningAni { 0% { background-position:0; } 100% { background-position:30px; } }
@keyframes runningAni { 0% { background-position:0; } 100% { background-position:30px; } }
-
不规则圆角的计算，通过4条边上8条线长短，来修改圆角的样式
不规则圆角
border-radius:70% 30% 30% 70% / 60% 40% 60% 40%;
- 通过clip-path来做不同形状，如圆形、椭圆、三个点以上的多边形，通过给clip-path添加缓动来实现任性形状变换，例如
http://www.species-in-pieces.com网站中呈现动画的那个样子;
通过CSS clip-path生成器可以来快速实现效果开发
- 创意使用
图片形状区域 - 变化为 - 视频动画入场的初始区域 ; 例如： https://ro.com/ep9/
- RWD响应式设计 - 菜单的处理
在同一套结构，不同css渲染PC和移动端的前提情况下：
※ 尽量将移动端样式写在移动端宽度的媒体查询中，并设置其默认隐藏，同时添加显示类名再同一个媒体查询内，开关按钮添加的显示隐藏，通过类名添加或者移除来实现，这样做的好处，隐藏或者显示，调整页面宽度从手机到PC，菜单不用再二次通过JS来干预。
※ pc端控制移动端新增的结构部分隐藏，在移动端媒体查询内控制其显示（通过ID选择器嵌套，提高渲染优先级）
未完待续....
