随笔分类 - CSS3
1
摘要：以前使用瀑布流都要用js，现在有了css3，可以轻松实现了。 掌握点： 1、column-count 把div中的文本分为多少列 2、column-width 规定列宽 3、column-gap 规定列间隙 4、break-inside: avoid; 避免元素内部断行并产生新列 注意: Inter
阅读全文
摘要：a、b、c、d，可以以这四种等级为依据确定CSS选择器的优先级： a style 行内样式 个数 +1000 b id 个数+100 c 类 个数+10 d 类型个数+1 !important 规则是例外，级别高于一切 练习下： 把能想到的都发在评论里吧~
阅读全文
摘要：旧式的弹性盒子方法1、在拥有盒子的盒子上加display:box; 或inline-box开启弹性盒模型2、box-flex 分配空间，假如容器有a份，box-flex:2，那就占a分之23、分布方向 水平box-orient: horizontal; 垂直box-orient:vertical;4...
阅读全文
摘要：几个突破口：(为了更简洁理解，先忽略兼容)1、认识3D的坐标系rotateX()-----------元素绕X轴旋转rotateY() -----------元素绕Y轴旋转rotateZ() -----------元素绕Y轴旋转transform:rotateX(20deg);2、perspecti...
阅读全文
摘要：html5标签 css3的border-radius在IE下没有效果，解决方法：首先下载ie-css3.htc脚本，然后在css中加入：behavior: url(ie-css3.htc);当你使用了这个htc文件后，你的CSS里面，只要写有box-shadow, -moz-b...
阅读全文
摘要：box-shadow是给元素块添加周边阴影效果语法：对象选择器 {box-shadow:X轴偏移量 Y轴偏移量阴影 模糊半径 阴影扩展半径 阴影颜色 [投影方式]}box-shadow: h-shadow v-shadow blur spread color inset;值描述h-shadow水平阴...
阅读全文
摘要：textarea在一些浏览器上可以被拖拉改变大小，为了保持美观，可以通过CSS3 resize 属性禁掉textarea{resize:none; //不允许用户调整元素大小}
阅读全文
摘要：加上这两个就行 display:-webkit-box; 显示成盒子模式 -webkit-box-align:center; 垂直居中 -webkit-box-pack:center; 水平居中 注意浏览器兼容前缀噢~
阅读全文
摘要：overflow:hidden; 超出隐藏white-space:nowrap; 不让换行，直到text-overflow:ellipsis; 超出显示省略号... css3属性
阅读全文
摘要：animation只应用在页面上已存在的DOM元素上，学这个不得不学keyframes，我们把他叫做“关键帧”。keyframes的语法法则： @keyframes flash { from{ left:0; } ...
阅读全文
摘要：之前的transform 可以实现转换，但是一下子就放大缩小视觉上不太好看，要想渐变该如何呢？可以使用transitiontransition主要包含四个属性值：transition: property duration timing-function delay;执行变换的属性：transitio...
阅读全文
摘要：利用transform 可以实现旋转、缩放、倾斜、移动属性有：translate、scale移动：translateX(10px); //水平方向移动10pxtranslateY(50px); //垂直方向移动50pxtranslate(10px); //水平方向移动10pxtranslate(1...
阅读全文
摘要：在做前端开发时，经常要在css3的属性前加上各浏览器厂商的前缀：，如Chrome(谷歌浏览器) ：-webkit- Safari(苹果浏览器) ：-webkit- Firefox(火狐浏览器) ：-moz- IE(IE浏览器) ：-ms- Opera(欧朋浏览器) ：-o-方法一：IDEA输入：tr...
阅读全文
摘要：安装插件autoprefixer步骤：1、确保Node.js已经安装，未安装请 点击 这里>>2、下载autoprefixer插件https://github.com/sindresorhus/sublime-autoprefixer3、打开sublime ，选择菜单Preferences >Bro...
阅读全文
摘要：:target 用于选取当前活动的目标元素 链接一链接二内容一内容二效果：点击链接一，内容一变红 ； 点击链接二，内容二变红
阅读全文
摘要：:empty ---空的元素样式 内容1 内容1 sd
阅读全文
摘要：first-line 设置首行样式first-letter 设置首字母样式before 在某元素前插入内容并设置内容样式after 在某元素后插入内容并设置内容样式 实例:第一行 第二行
阅读全文
摘要：在 CSS3 中，追加了三个属性选择器分别为：[att*=val] ----内容包含[att^=val] ----开头匹配[att$=val] ----结尾匹配示例： 实例1: sdf sdf sdf
阅读全文
摘要：transform的属性scale(x,y) 对元素进行缩放,x表示水平方向缩放倍数，y表示垂直方向的缩放倍数，y是可选参数，不设置，则表示两个方向的倍数是一样的，基点一样在元素的中心位置。还有单向拉伸的scaleX和scaleY。Demo
阅读全文
摘要：CSS3PS是Photoshop 插件，用来将 PhotoShop 的图层如内阴影、内发光、阴影、外发光、图片圆角等效果转成用 CSS3 样式。 官方下载地址>> http://css3ps.com/Download/ 如果ps对应版本下载为：CSS3Ps.jsx ，则不用安装， 选中需要转换样式的
阅读全文
1
