CSS3 学习笔记
border-radius
圆角是做网页永远绕不过的话题,以前基本是通过背景图片做的,有了 CSS3 以后通过属性就 能够搞定,我们可以通过
border-radius设置元素的圆角半径。
border-radius: 5px;
对于一个正方形,我们只需要设置为边长的一半就可以呈现一个圆。
div { width: 200px; height: 200px; border-radius: 50%; // 设置百分比 border-radius: 100px; // 设置长度一半 }
border-radius是缩写的格式,其实
border-radius和
border属性一样,还可以把各个角单独拆分出来,也就是以下四种写法
border-top-left-radius: length, length; border-top-right-radius: length, length; border-bottom-left-radius: length, length; border-bottom-right-radius: length, length;
第一个值是圆角水平半径,第二个值是垂直半径,如果第二个值省略,那么其等于第一个值,这时这个角就是一个四分之一的圆角,如果任意一个值为0,那么这个角就不是圆角
box-shadow
CSS3 原生支持了阴影效果
box-shadow:inset h-shadow v-shadow blur-radius spread-radius color
box-shadow属性至多有6个参数设置:
阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果取其唯一值inset,就是将外阴影变成内阴影
h-shadow: 是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边
v-shadow: 是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对象的底部,反之其值为负值时,阴影在对象的顶部
阴影模糊距离:此参数是可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊
阴影阴影的尺寸:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值是,则缩小
阴影颜色:此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样
box-shadow可以使用一个或多个投影,如果使用多个投影时必须需要用逗号,分开
box-shadow: 3px 3px 3px orange, 3px 3px 3px red;
box-sizing
这个属性多少和边框也相关,传统的盒模型width就是指内容区域宽度,和padding、border没有关系,但是这在布局上带来一定的困难
box-sizing可以改变盒模型
- content-box:标准盒模型
- border-box:
width = padding-left + padding-right + border-left-width + border-right-width + content width
height = padding-top + padding-bottom + border-top-width + border-bottom-width + content height
div { width: 100px; // width 包含了左右padding的宽度 + 左右border的宽度 height: 100px; // height 包含了上下padding的宽度 + 上下border的宽度 padding: 20px; border: 1px solid #000; box-sizing: border-box; }
text-overflow
- clip:隐藏超出文本
- ellipsis:显示省略符号来代表被修剪的文本。
对于省略号效果还需要其它属性配合
p { width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
担心会有人提问上面的代码只能在第一行显示省略号,假如我想在第二行或者第三行显示怎么办呢?
原理就是通过伪元素
::after来实现是不是非常的 easy。
过渡和动画
CSS3 的动画是浏览器原生支持的,好处就是流畅
transition(过渡)
在CSS3引入
transition之前css没有时间轴,所有的状态变化都是瞬间完成。
transition的作用在于,指定状态变化所需要的时间
div { width: 100px; height: 100px; border: 1px solid #000; background-color: #000; transition: all 1s; } div:hover { width: 200px; height: 200px; }
指定属性
我们还可以指定transition适用的属性
div { transition: 1.5s width; }
这样一来,只有height的变化需要1秒实现,其他变化(主要是width)依然瞬间实现。
在同一行transition语句中,可以分别指定多个属性
div { transition: 1.5s width, 1s height; }
delay
delay:中文翻译延迟,顾名思义就是延迟多长时间在执行状态变化。
需要注意的是 delay的参数是在时间的后面
div { transition: 状态完成时间 height, 状态完成时间 延迟时间(delay) width; }
div { transition: 2s height, 0.5s 2s width; }
delay的真正意义在于,它指定了动画发生的顺序,使得多个不同的transition可以连在一起,形成复杂效果
transition-timing-function
transition的状态变化速度(又称timing function),默认不是匀速的,而是逐渐放慢,这叫做ease
div { transition: 1s ease; }
除了ease以外,其他模式还包括
- linear:匀速
- ease-in:加速
- ease-out:减速
- ease-in-out:规定以慢速开始和结束的过渡效果
- cubic-bezier函数:自定义速度模式 链接
注意事项
- 目前,各大浏览器(包括IE 10)都已经支持无前缀的transition,所以transition已经可以很安全地不加浏览器前缀 transition兼容性
- transition需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态,什么none到block之类的是不行的
- transition是一次性的,不能重复发生,除非一再触发。
- 自定义RedioButton样式
- CSS学习4(文本属性)
- css选择器
- DIV+CSS布局
- CSS child selector
- css改变透明背景png图片的图标颜色
- CSS布局属性
- css 绝对定位居中
- css 强制换行 IE、firefox 换行
- CSS学习3(字体)
- 如何截取iframe的内容,修改他的CSS
- 前端案例--纯css3实现怪异选项卡
- css 动画 transform transition animation
- 【CSS笔记六】CSS盒模型
- DIV+CSS clear both清除产生浮动
- CSS学习2(值和单位)
- 《CSS权威指南》学习记录——生成内容
- CSS的Display属性可能的值
- css3 背景渐变
- HTML+CSS3-》第1阶段:Web前端开发基础环境配置