随笔分类 -  CSS3

CSS3 新特性应用总结
摘要：一、半透明边框 css3最好用hsla，而不是rgba，hsla是：h：颜色值(0~360)；s：饱合度(0%~100%)；l：亮度(0%~100%)；a：透明度(0~1) background-clip：裁剪背景颜色，默认为border-box(背景颜色扩散到border）；padding-box 阅读全文
posted @ 2016-12-19 10:09 —━紫風.づ 阅读(192) 评论(0) 推荐(0)
CSS3新特性应用（3️⃣）形状
摘要：一、自适应椭圆 * border-radius特性： * 可以单独指定水平和垂直半径，并且值可以是百分比，用/（斜杠）分隔这两个值即可（可以实现自适应宽度椭圆）。 * 还可以单独指定四个角度不同的水平和垂直半径（可以实现半椭圆） * 四分之一椭圆，主要是调整水平和垂直的半径* 示例代码： .wrap 阅读全文
posted @ 2016-12-19 10:00 —━紫風.づ 阅读(381) 评论(0) 推荐(0)
CSS3新特性应用（2️⃣）视觉效果
摘要：一、单侧阴影 box-shadow属性的应用，格式：h-shadow v-shadow blur spread color inset属性取值介绍 h-sahdow：水平阴影的位置，允许负值 v-shadow：垂直阴影的位置，允许负值 blur：模糊距离 spread：阴影的尺寸，扩张距离，可以为负 阅读全文
posted @ 2016-12-19 09:57 —━紫風.づ 阅读(387) 评论(0) 推荐(0)
CSS3新特性应用（1️⃣）字体排印
摘要：一、插入换行 ~：表示同辈元素之后指定类型的元素，如;elm1 ~ elm2表示,elm1之后的所有elm2元素，且elm1与elm2都是在同一个父级元素。 +：表示同辈元素的兄弟元素。 \A：一个空白换行符 解决方案： 在dd与dt相邻的dt上的子元素前面加入一个空白换行符 在相邻的dd与dd之间 阅读全文
posted @ 2016-12-19 09:54 —━紫風.づ
CSS3（七） 前端预处理技术（Less、Sass、CoffeeScript）
摘要：目录 一、Less 1.1、概要 1.2、变量 1.3、解析Less 1.3.1、在线处理 1.3.2、预处理 1.4、混入(Mixins) 1.5、嵌套 1.6、运算 1.7、函数 1.8、继承 1.9、作用域 1.10、注释 二、Sass 2.1、变量 2.2、嵌套 2.3、导入 2.4、mix 阅读全文
posted @ 2016-12-09 15:22 —━紫風.づ 阅读(1313) 评论(0) 推荐(0)
CSS3（六） CSS3新特性（阴影、动画、渐变、变形、伪元素等）
摘要：目录 一、阴影 1.1、文字阴影 1.2、盒子阴影 二、背景 2.1、背景图像尺寸 2.2、背景图像显示的原点 三、伪元素 3.1、before 3.2、after 3.3、清除浮动 四、圆角与边框 4.1、border-radius 圆角 4.2、边框图片border-image 五、变形 tra 阅读全文
posted @ 2016-12-09 15:21 —━紫風.づ 阅读(653) 评论(0) 推荐(0)
CSS3（五）Web Font与Sprite
摘要：目录 一、web font 1.1、什么是font-face 1.2、font-face优点 1.3、字体格式 1.4、使用@font-face 1.4.1、下载字体 1.4.2、使用font-face将字体引入web中 1.4.3、应用字体 1.4.4、字体格式转换 1.4.5、查看字体编码 1. 阅读全文
posted @ 2016-12-09 15:19 —━紫風.づ 阅读(222) 评论(0) 推荐(0)
CSS3（四）页面布局大全
摘要：目录 一、负边距与浮动布局 1.1、负边距 1.1.1、向上移动 1.1.2、去除列表右边框 1.1.3、负边距+定位，实现水平垂直居中 1.1.4、去除列表最后一个li元素的border-bottom 1.2、双飞翼布局 1.3、多栏布局 1.3.1、栅格系统 1.3.2、多列布局 二、弹性布局（ 阅读全文
posted @ 2016-12-09 15:18 —━紫風.づ 阅读(2541) 评论(0) 推荐(1)
CSS3（三）BFC、定位、浮动、7种垂直居中方法
摘要：目录 一、BFC与IFC 1.1、BFC与IFC概要 1.2、如何产生BFC 1.3、BFC的作用与特点 二、定位 2.2、relative 2.3、absolute 2.4、fixed 2.5、z-index属性 2.6、菜单 2.7、:target伪类 三、浮动 3.1、float取值 3.2、 阅读全文
posted @ 2016-12-09 15:16 —━紫風.づ 阅读(734) 评论(0) 推荐(0)
CSS3（二）Box Model、边距折叠、内联与块标签、CSSReset
摘要：目录 一、盒子模型（Box Model） 1.1、宽度测试 1.2、溢出测试 1.3、box-sizing属性 1.4、利用CSS画图 二、边距折叠 2.1、概要 2.2、垂直方向外边距合并计算 三、内联与块级标签 3.1、行内标签与块标签区别 3.2、隐藏 3.3、行内块标签 3.4、菜单示例 四 阅读全文
posted @ 2016-12-09 15:15 —━紫風.づ 阅读(680) 评论(0) 推荐(0)
CSS3（一）概要、选择器、特殊性与刻度单位
摘要：目录 一、CSS3概要 1.1、特点 1.2、效果演示 1.3、帮助文档与学习 二、选择器 1.1、基础的选择器 1.2、组合选择器 1.3、属性选择器 1.4、伪类 1.5、伪元素 三、特殊性（优先级） 3.2、计算特殊性值 四、刻度 4.1、绝对长度单位 4.2、文本相对长度单位 4.3、Web 阅读全文
posted @ 2016-12-09 15:13 —━紫風.づ 阅读(278) 评论(0) 推荐(0)