https://www.dowebok.com/
https://www.dowebok.com/134.html
http://www.ouchn.cn/
http://www.ouchn.cn/smartadvisor
https://www.cnblogs.com/hnyei/archive/2011/10/04/2198779.html
https://zhuanlan.zhihu.com/p/100394824
https://www.cnblogs.com/hnyei/p/4605103.html
https://www.cnblogs.com/fzkbk/p/14419138.html
https://www.cnblogs.com/cherry1990/p/4038403.html
https://www.cnblogs.com/sxbamboo/archive/2006/03/22/355481.html
https://www.cnblogs.com/hnyei/archive/2012/03/28/2420782.html
body{background-color:#f2f2f2;}
*{/*! margin:0px; *//*! padding:0px; */}
.box{height: 100px;width: 100px;position: relative;border: 1px solid #000;overflow: hidden;}
.box p{height:10px;line-height:10px;transform:rotate(45deg);position: absolute;top: -8px;left: 50%;width: 80px;text-align: center;border: 1px solid red;font-size: 11px;}
.box:after {
position: absolute;
top: -1px;
right: -8px;
display: block;
width: 0;
height: 0;
content: ' ';
border-color: transparent transparent transparent #fff;
border-style: solid;
border-width: 18px 0 18px 8px;
}
.trangle{
width: 0px;
height: 0px;
border: 50px solid #000;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: red;
border-right-color: transparent;
}
阴影 shadow
分为块阴影box-shadow和文字阴影 text-shadow。
阴影（shadow）
box-shadow
text-shadow
渐变（gradient）
linear-gradient
radial-gradient
过渡（transition）
变形（transform）
滤镜（filter）
阴影、rgba、transition、圆角、animation、transform、
Agoni_5eb2
2019.10.23 11:22:21
字数 557
阅读 102
阴影：box-shadow：h-shadow v-shadow blur spread color inset;
水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
transition： transition-property：设置过渡的属性 eg：{transition-property：width/height/background-color}
transition-duration：设置过渡的时间 eg：1s 500ms
transition-timing-function：设置过渡的运动方式
ease-in：开始是慢速 ease-in-out：开始和结束时慢速 ease-out：结束时慢速
cubic-bezier(n,n,n,n)：曲线设置，用时查找 transition-delay：设置动画的延迟
transition: property duration timing-function delay 同时设置四个属性
圆角：设置左上角：border-top-left-radius:30px 60px;
分设四角：border-radius:30px 60px 120px 150px;
设置四个圆角相同：border-radius:50%;（此时为正圆）
animation： @keyframes：定义关键帧动画 animation-name：动画名称 animation-duration：动画时间 animation-timing-function：动画曲线
linear：匀速 ease：开始和结束慢速 ease-in：开始是慢速 ease-out：结束时慢速
ease-in-out：开始和结束时慢速
steps：动画步数 animation-delay：动画延迟animation-iteration-count：动画播放次数
n|infinite animation-direction normal：默认动画结束不返回
Alternate：动画结束后返回 animation-play-state：动画状态paused：停止
running：运动 羽化大小不可为负 deg为度数单位
perspective一般值为800px 正值沿轴顺时针旋转；负值逆时针旋转
rgba：rgba（0，0，0，0.1）第四个为透明度
transform：translate(x,y)：设置盒子位移 （x为水平方向上，y为垂直方向上）
scale(x,y)：设置盒子缩放 rotate(deg)：设置盒子旋转 skew(x-angle,y-angle)：设置盒子斜切（单位为deg） perspective：设置透视距离（通常设为800px） transform-style flat | preserve-3d：设置盒子是否按3d空间显示 translateX、translateY、translateZ：设置三维移动 rotateX、rotateY、rotateZ：设置三维旋转 scaleX、scaleY、scaleZ：设置三维缩放 tranform-origin：设置变形的中心点 backface-visibility：设置盒子背面是否可见 {backface-visibility：hidden；（背面不可见）}
https://blog.csdn.net/Wangxinlei_King/article/details/100609442
https://www.cnblogs.com/yangjunyi/articles/6214157.html
https://www.it610.com/sui/docs/form-validate.html
https://www.it610.com/sui/docs/examples/my-purchase.html
https://www.it610.com/sui/docs/examples/serving-custom.html
https://www.jianshu.com/p/c60bb8ae4ff8
http://www.100sucai.com/code/7077.html
https://blog.csdn.net/qq_52354004/article/details/124503867
https://www.w3cschool.cn/doc_css/css-transform-function-translatey.html
winfrom c#两个图片调整合并
OpenCvSharp
电脑培训
继续transform的3D用法：
translate3d（x，y，z）定义3D转换
transformX（x）只用x轴的值进行转换；
transformY（y）只用y轴的值进行转换：
transfornZ(z)只用z轴的值进行3d转换；
scale缩放
scale3d（x，y，z）定义3d的缩放
scaleX（x）在x轴方向的缩放
scaleY（y）在y轴方向进行缩放
scaleZ（z）定义在z轴的方向进行缩放
rotate旋转（deg角度）
rotate3d(x，y，z，angle）定义3d的旋转
rotateX（deg）定义x轴的旋转
rotateY(deg) 定义y轴的旋转
rotateZ(deg)定义Z轴的旋转
matrix3d( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义3d的转换，使用16个4乘4的矩形的值来定位。
transform-origin：作用和2d的一样，都是改变变形的起点 z轴是3d的特有表现
transform-style：规定被嵌套的元素如何在3d环境下显示：
flat表示不保留在子元素的3d空间
preserve-3d表示保留子元素的3d空间
perspective-origin：规定3D元素的底部位置；目前浏览器都不支持；
backface-visibility：定义元素在不面对屏幕时是否可见；浏览器支持度不好。
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
https://pan.baidu.com/s/1cszsgjKN9ecWZ9sm1hDAdQ
https://www.jb51.net/article/207151.htm
https://www.cnblogs.com/serafin/archive/2012/07/13/2589727.html
https://www.cnblogs.com/luyj00436/p/15215649.html
清除DNS缓存
div 一行四个div 左右贴边
.cont li:nth-child(5n+1) .boxli{ /*最左侧盒子去掉左边margin*/
margin-left:0;
background: skyblue;
}
.cont li:nth-child(5n) .boxli{ /*最右侧盒子去掉左边margin*/
margin-right: 0;
}
————
https://www.techbrood.com/
http://yangjunwei.com/
css 卡片尾部尖角
css 三角形
https://www.php.cn/vip.html
https://www.cnblogs.com/cckui/p/14681776.html
https://m.php.cn/article/473454.html
https://www.cnblogs.com/cckui/p/11046826.html
transform属性设置文字的倾斜角度
https://www.cnblogs.com/coco1s/p/5528393.html
https://www.cnblogs.com/coco1s/p/16638418.html
https://www.cnblogs.com/depressiom/p/16566964.html
https://blog.csdn.net/weixin_53312997/article/details/124941579
transform:rotate(45deg);
http://www.lvyestudy.com/css3/transform-skew
css3代码让页面倾斜
教大家一个方法使用CSS把整个网页倾斜，代码只有在支持CSS3.0的浏览器上有效果。目前只有IE9以上版本及firefox高版本支持，其它浏览器没有测试。代码如下
body{
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
}
https://www.aiqicha.com/
https://www.cnblogs.com/lzugis/p/7224360.html
paint.net
jquery 图像截图
http://www.croppic.net/
https://sc.chinaz.com/jiaoben/130221012881.htm
https://sc.chinaz.com/jiaoben/190722491620.htm
https://sc.chinaz.com/jiaoben/160201091600.htm
https://demosc.chinaz.net/Files/DownLoad/webjs1/201601/jiaoben3964/
jQuery jcrop
Jcropper
imgareaselect
jQuery截图插件Jcrop
https://www.jq22.com/demo/dragsort20151103/
https://www.jq22.com/demo/jquery-tdfz20160803/
https://www.jq22.com/demo/imgZoom201703121922/
https://www.jb51.net/article/22971.htm
https://www.66law.cn/laws/595762.aspx
var el = $('.ZMenu-left-nav-a.item');
el.click(function() {
if ($(this).hasClass('up')) {
$(this).removeClass('up');
$(this).addClass('down');
var objc = $(this).next().get(0);
alphaPlay(objc, "show");
} else if ($(this).hasClass('down')) {
$(this).removeClass('down');
$(this).addClass('up');
var objc = $(this).next().get(0);
alphaPlay(objc, "hiden");
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/comm.css" rel="stylesheet" />
</head>
<body>
<div class="box">
<p>角标</p>
</div>
<div class="trangle"></div>
</body>
</html>