- 1、本文档共14页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
.
..
HYPERLINK /jinkspeng/p/4295146.html css3 总结01
前缀
chrome: -webkit-
safari: -webkit-
firefox: -moz-
ie: -ms-
opera: -o-
书写的时候应该先用有前缀的样式,再用无前缀的样式
颜色
rgb(red, green, blue);
rgba(red, green, blue, opacity[0-1]);
hsl(色度, 饱和度, 亮度);
色度为色轮的度数,0/360d代表红色,120代表绿色,240代表蓝色;饱和度百分比值,100%表示完全显示该颜色;亮度百分比值,0%代表黑色,100%代表白色,50%平均值
圆角
border-radius: 20px;//水平,垂直border-radius: 20px,20px;//左上,右上,右下,左下border-radius: 20px,20px 20px 20px;
下拉阴影
//水平;垂直;模糊直径;颜色box-shadow: 10px 5px 15px #000;//内阴影box-shadow: 10px 5px 15px #000 inset;//水平;垂直;模糊直径;延展距离;颜色box-shadow: 10px 5px 15px 15px #000;//多阴影box-shadow: 0 1px 1px #fff inset, 5px 5px 10px #000;
chromw:-webkit-;safari:-webkit-;ie=9
文本阴影
//水平;垂直;颜色text-shandow: 1px 1px #fff;//水平;垂直;模糊直径;颜色text-shandow: 1px 1px .3em #fff;
渐变
默认下渐变是垂直方向的;也可以传递一个位置参数来改变方向
linear-gradient(#ccc, #ddd, white);//设定一个倾斜度
linear-gradient(-45deg, #ccc, #fff);//水平渐变
linear-gradient(left, #ccc, #fff);//设置颜色停止值
linear-gradient(white, #ddd 20%, black);
选择器
//选中的第一个元素:first-child//选中的最后一个元素:last-child//选中的元素是其父元素的唯一子元素:only-child//选中当前URL的哈希中的目标元素:target
//选中复选框以被勾选的元素
:checked
nth-child选择器
nth-child(n);
nth-child(even);/nth-child(2n);
nth-child(odd);/nth-child(2n+1);
直接后代选择器
否定选择器
:not(.current)
ie=9
过渡
transition: 持续时间, 属性, [动画类型];//多个动画transition: 2s opacity, .5s height ease-in;
定时函数种类
linear
ease-in
ease-out
ease-in-out
例子
div {
background: pink;
width: 50px;
height: 50px;
-moz-transition: 2s width ease-in, 2s height ease-out; /* Firefox 4 */
-webkit-transition: 2s width ease-in, 2s height ease-out; /* Safari and Chrome */
-o-transition: 2s width ease-in, 2s height ease-out; /* Opera */
transition: 2s width ease-in, 2s height ease-out;}div:hover{
width: 100px;
height: 150px;}
div {
position: absolute;
left: 10px;
-moz-transition: 2s left
-webkit-transition: 2s left;
-o-transition: 2s left ;
transition:2s left;
}
div:hover{
position: absolute;
left: 100p
您可能关注的文档
- 35KV变电所施工组织设计.doc
- 35KV变电站防雷接地保护设计.doc
- 35KV变电站施工方案(DOC).doc
- 35kV配电系统调试试验方案.doc
- 35KV输变电线路维护报告.doc
- 35kV双汇变电站间隔扩建工程施工方案.doc
- 35千伏变电站设计.doc
- 43号:基于“工匠精神”的高职“双创”人才培养模式探究.doc
- 46英寸(3×6)超窄边DID液晶拼接设计方案.doc
- 51单片机C语言几个数组定义的区别(精).doc
- 浙江衢州市卫生健康委员会衢州市直公立医院高层次紧缺人才招聘11人笔试模拟试题参考答案详解.docx
- 浙江温州泰顺县退役军人事务局招聘编外工作人员笔试备考题库及参考答案详解一套.docx
- 江苏靖江市数据局公开招聘编外工作人员笔试模拟试题及参考答案详解.docx
- 广东茂名市公安局电白分局招聘警务辅助人员40人笔试模拟试题带答案详解.docx
- 江苏盐城市大丰区住房和城乡建设局招聘劳务派遣工作人员4人笔试模拟试题带答案详解.docx
- 浙江舟山岱山县东沙镇人民政府招聘笔试模拟试题及参考答案详解1套.docx
- 最高人民检察院直属事业单位2025年度公开招聘工作人员笔试模拟试题含答案详解.docx
- 浙江金华市委宣传部、中共金华市委网信办所属事业单位选调工作人员笔试备考题库及答案详解1套.docx
- 广东深圳市党建组织员招聘40人笔试模拟试题及答案详解1套.docx
- 江苏南京水利科学研究院招聘非在编工作人员4人笔试模拟试题及参考答案详解.docx
最近下载
- 2025年4月20日四川省事业单位考试《公共基础知识》试题及答案解析参考.pdf
- 中层竞聘面试题目答案.doc VIP
- 电力系统优化与调度软件:PLEXOS二次开发_(4).电力系统优化理论.docx VIP
- 传染病、消毒知识测试题及答案.docx VIP
- 2025年解放军联勤保障部队第960医院医护人员招聘备考试题及答案解析.docx VIP
- 2021年版国家免疫规划疫苗儿童免疫程序相关知识考核试题含答案.docx VIP
- 电力系统优化与调度软件:Xpress二次开发_(3).电力系统优化问题的数学建模.docx VIP
- 中建钢筋精算管理操作手册.pdf VIP
- 电商仓库主管月工作总结.pptx
- 预防接种工作规范(2023版)试题.docx VIP
文档评论(0)