前端小知识-css3

一、实现图片倒影

如图：

css属性

.style{
   　　-webkit-box-reflect:below 0 linear-gradient(transparent,white 50% ,white);
}

原文地址：https://www.cnblogs.com/yyxh/p/8968841.html

时间： 2024-10-13 13:30:46

前端小知识-css3的相关文章

你不一定知道的几个前端小知识

1 大家都知道js在进行小数运算时会有丢失精度问题(其他语言也是),比如: 0.1+0.2 //0.30000000000000004 有一种比较快捷的方式是先把小数乘以10的整数倍,然后再运算,如: (0.1*10+0.2*10)/10 //0.3 但是这种方式也不是100%准确的,乘以整百也可能精度丢失,比如: 2177.74*100 //217773.99999999997 所以常用的几种处理方式有: 把小数转化为字符串,拆分整数部分和小数部分分别计算,然后再把结果进行拼接; 先乘10的整

前端小知识关于css3新增知识归纳总结

1.新增选择器 E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:only-child E:only-of-type E:empty E:checked E:enabled E:disabled E::selection E:not(s) 2.Font-face 特性 Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没

web前端小知识，安书整理的

网页设计理论知识构成网页的页面元素 1, 网站的LOGO LOGO的设计,往往具有一些共同的特点:精美,独特,与网站的整体风格相融,能够体现网站的类型,内容,风格等. 2, 网站的Banner Banner是指网页横幅广告,最常用的是486*60像素的标准标志广告 3, 导航栏导航栏是为于页眉区域,导航栏分为框架导航,文本导航,图片导航 4, 文本 5, 图像 6, 动画 7, 超级链接网页版面的布局技巧平衡:平衡指页面的左右,上下和谐而有秩序对比:对比是指利用色彩.色调

自己容易遗漏的前端小知识

1.padding是内边距,margin是外边距; 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并. 引用w3school中的例子 2.相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块. 3.将服务器端构建好的JSON数据转化为可用的JavaScript对象 var jsonObject = eval("(" + json+ ")")

web前端小案例-css3制作浏览器背景渐变背

知识点:rgb全色循环算法,HEX与RGB颜色转换算法.CSS3颜色渐变,CSS3渐变色兼容ie方法,定时器与循环,函数封装,数组应用等. css代码: <style> *{margin:0;padding:0;} body#wrap{width:100%;height:500px; } </style> JavaScript代码: <script> function convert(sRgb){ /*rgb转换成HEX*/ var sRgb=sRgb; var sHe

前端小知识2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

前端小知识

$CSS button里不嵌入a标签 disabled效果会不理想 css的属性选择器(w3school查看详细) input[type="text"]{color:blue;width:100px} <input type="text" value="属性选择器"> $代码编辑器 vscode vscode访问git,下载devServer,ctrl+shift+p调出命令框,搜索devServer:start 在http://lo

实用前端小知识

/* 单行文字溢出省略号 */ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; height: xxx; /* 多行文字溢出省略号 */ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;height: xxx; /* 多行文字溢出省略号 */ word-wrap:break-word;

前端小知识点积累

作为一名前端,一直想说,一入前端深似海啊.也许在很多人眼中,前端就是简简单单的写页面的,但实际上前端的水还都是很深的,具体就不做叙述了. 今天来的主要目的是分享平时积累的一些前端小知识一:js,jq获取各种高度 Javascript: alert(window.screenTop); //浏览器距离Top alert(window.screenLeft); //浏览器距离Left alert(window.scre