随笔分类 - css3基础
摘要:grid 布局的使用 css 网格布局,是一种二维布局系统。 浏览器支持情况:老旧浏览器不支持, 概念: 网格容器。元素应用dispalay:grid,它是所有网格项的父元素。 <div class="container"> <div class="item item-1"></div> <div
阅读全文
摘要:使用第三方平台转换字体文件为font-face所支持的格式。 TureTpe(.ttf)格式 支持浏览器:IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+ OpenType(.otf) 格式 支持浏览器:Firefox
阅读全文
摘要:flex 即为弹性布局。 任何一个容器都可以指定为flex布局。 行内元素可以使用flex布局 webkit内核的浏览器必须加上-webkit 前缀。 注意:元素设置flex布局以后,子元素得float ,clear 和 vertical-align 属性将失效。 基本概念: 采用flex布局的元素
阅读全文
摘要:compass 是sass的一个工具库 compass在sass 的基础上封装了一系列有用的模块,用来补充和丰富sass的工能, 安装: compass是用 ruby语言开发的,所以安装它之前必须安装ruby。 命令: gem install compass 项目初始化: 要创建一个你的Compas
阅读全文
摘要:1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现。 语法:transform-style: flat | preserve-3d flat 表示所有子元素在2D平面呈现。 preserve-3d 表示所在元素在3D空间中呈现。2.perspective 定义3D元素距视图的
阅读全文
摘要:1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css 属性名称 语法: transition-property: none | all | propert
阅读全文
摘要:1.box-shadow 属性向框添加一个或者多个阴影。 语法: box-shadow: h-shadow v-shadow blur spread color inset h-shadow 必须,水平阴影的位置,允许负值。 v-shadow 必须,垂直阴影的位置,允许负值。 blur 可选 模糊距
阅读全文
摘要:响应式设计是在不同设备下分辨率不同显示的样式就不同。 media 属性用于为不同的媒体类型规定不同的样式。根绝浏览器的宽度和高度重新渲染页面。 语法: @media mediatype and | not | only (media feature) {} 示例: <link rel="styles
阅读全文
摘要:1.box-flex属性规定框的子元素是否可伸缩其尺寸。 父元素必须要声明display:box;子元素才可以用box-flex。 语法:box-flex:value; 示例: 结果: 图片 可以指定某个子元素的宽度,剩下的部分平分。 示例: 结果: 图片 2.box-orient 用来确定子元素的
阅读全文
摘要:1.属性选择器 完全匹配的属性选择器 [id=article]{} 示例: 结果:前两文本框的边框为两像素红色。 包含匹配元素选择器,包含制定的字符串。 语法:[attribute*=vlue] attribute指的属性名,value 指的是属性值。 示例: 结果:第一个和第三个文本会变红 首字符
阅读全文
摘要:css3 mix-blend-mode 混合模式 该属性不仅可以作用于HTML,还可以作用于SVG 兼容性: IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 Safari 7~9.1 支持的值很多: mix-blend-mode:normal; //正常
阅读全文
摘要:语法: R:红色值。正整数 | 百分数 G:绿色值。正整数 | 百分数 B:蓝色值。正整数| 百分数 A:透明度。取值0~1之间 取值: <length>:Hue(色调)。0(或360)表示红色,120表示绿色,当然可以取其他数值来确定其他颜色。 <percentage>:Saturation(饱和
阅读全文
摘要:分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。 1.线性渐变在Mozilla 下应用 语法:-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 参数;共三个参
阅读全文
摘要:transitions(过渡) 被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值。 主要包括四个属性: 执行变换的属性:transition-property 变换延续的时间:transition-duration 变换的速率变化:transition-timing-func
阅读全文
摘要:属性选择器: 1.完全匹配的属性选择器。 就是完全匹配的字符串。 2.包含匹配选择器。包含有指定的字符串。 语法是:[attribute*=value] attribute 指的属性名,value 指的是属性值, 包含采用“*=”符号。 3.首字符匹配选择器。只要开头字符符合匹配。 语法是:[att
阅读全文