css
关注
分享
扫一扫
Vincent前端路漫漫
WEB开发者，iOS开发者
展开
-
CSS-文本
文本修饰text-decoration: (line-through | underline | overline | none | inherit)line-through - 横穿文本underline - 下划线overline - 上划线none - 无inherit - 继承自父元素使用服务器端字体@font-face{ font-fa原创 2015-06-03 19:11:35 · 503 阅读 · 0 评论 -
CSS-颜色相关
background: rgba(r, g, b, alpha)IE不支持background: hsla(h, s, l,alpha)h - 色调（0/360 - 红色 | 120 - 绿色 | 240 - 蓝色），大于360的数值取除以360的余数（例如输入480就等于120）s - 饱和度（0%-100%）l - 亮度（0%-100%）opacity:原创 2015-06-03 19:02:52 · 411 阅读 · 0 评论 -
CSS-布局相关
多栏布局column-count: n - 栏数column-width: width - 栏宽（可以单独设定每一栏的宽度，也可以只设定元素的宽度，然后自适应）column-gap: width - 栏间距column-rule: 2px solid red - 间隔线盒布局display: box - 使用盒布局box-flex: 1 - 采用弹性宽度（至少为原创 2015-06-03 19:07:59 · 295 阅读 · 0 评论 -
CSS-文本换行
默认-浏览器自动换行英文字母 - 按单词断句换行中文字母 - 按字换行标点 - 不会单独出现在句首，会连带前面一个字或者单词word-breakword-break: (normal | keep-all | break-all);normal - 浏览器默认keep-all - 只允许在半角空格或连字符处换行break-all - 允许在单词中间换行（IE原创 2015-06-03 19:09:03 · 432 阅读 · 0 评论 -
CSS-background
background-clipbackground-clip: (border-box | padding-box | content-box)border-box - 背景包括边框部分padding-box - 背景不包括边框部分，包括padding部分content-box - 背景不包括边框及padding部分background-originbackgr原创 2015-06-03 19:10:45 · 416 阅读 · 0 评论 -
CSS-资料收录
SASSCSS预处理器，另外一个常用的是less运行环境 - Ruby官网http://sass-lang.com/documentation/file.SASS_REFERENCE.html完整的教程：http://www.w3cplus.com/preprocessor/how-to-create-project-with-sass.htmlCo原创 2015-06-03 19:11:11 · 365 阅读 · 0 评论 -
CSS-tansform变形
transform: (rotate | scale | skew | translate)rotaterotate(angle) - 旋转（顺时针）rotate(45deg) - deg是角度单位scalescale(x) - 放大x倍scale(x, y) - 横向放大x倍，纵向放大y倍skewskew(angle) - 水平方向上倾原创 2015-06-03 19:11:44 · 656 阅读 · 0 评论 -
CSS-阴影
text-shadow文本阴影text-shadow: x y blur color;box-shadow盒子阴影box-shadow: x y blur spread color (inset);inset - 可选值，为内部阴影原创 2015-06-03 19:12:11 · 342 阅读 · 0 评论 -
CSS-盒模型
displayinline - 内联元素inline-block - 内联块元素block - 块元素none - 不显示list-item - 列表元素run-in - 根据上下文是内联还是块级元素来显示table - 表格元素inline-table - 内联表格table-row-group - 行分组table-header-group - 表头分组原创 2015-06-03 19:12:36 · 377 阅读 · 0 评论 -
CSS-追加内容before、after
插入图像文件h1.new:after{ content: url("mark_new.png");}插入编号h1:before{ /* 使用自增计数器 */ content: counter(mycounter);}h1{ /* 指定自增计数器 */ counter-increment: mycounter原创 2015-06-03 19:12:40 · 1458 阅读 · 0 评论 -
CSS-过渡效果和动画效果
Transition过渡效果transition： property duration timing-function delay例子：transition: background-color 1s linear 1s, color 1s linear;propertyCSS属性名称duration时长（2s / 2ms）ti原创 2015-06-03 19:03:30 · 505 阅读 · 0 评论 -
CSS-渐变
不同内核需要加前缀：-webkit-linear-gradient(top,#000,#fff);-moz-linear-gradient(top,#000,#fff);-o-linear-gradient(top,,#000,#fff);也可以加一些渐变中间的颜色-webkit-linear-gradient(top,#000,#eee 20%,#fff);也可以使用co原创 2015-06-03 19:14:37 · 375 阅读 · 0 评论 -
CSS-选择器
属性选择器[id*=val] - id属性中包含val[id^=val] - id属性以val开头[id$=val] - id属性以val结尾id选择器#test - 选择id="test"的元素类选择器p.right - 带有right类的p元素伪类选择器a:link - 未访问的连接a:visited - 已访问的连接a:hove原创 2015-06-03 19:14:40 · 462 阅读 · 0 评论 -
CSS-三角形
.content { width: 100px; height: 100px; padding: 0; background: orange; position: absolute; top: 200px; left: 200px; } .content:after {原创 2015-06-03 19:15:03 · 369 阅读 · 0 评论 -
CSS-MediaQuery
语法：@media 设备类型 and （设备特性 = 样式代码）例子：@media screen and (max-width: 600px)设备类型：all - 所有设备screen - 电脑显示器print - 打印机或打印预览视图handheld - 便携设备tv - 电视机类型设备speech - 语音和音频合成器braille原创 2015-06-03 19:03:35 · 428 阅读 · 0 评论 -
CSS-正方体
CSS3的transform可以帮助我们实现很多的3d效果，下面是用div元素拼成的正方体：先来看看html代码： top left right 再来看看CSS代码： .side{ width: 100px; height: 100px; display: -webkit-box; -webkit-box-pack原创 2015-06-05 14:19:39 · 684 阅读 · 0 评论