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是一次性的,不能重复发生,除非一再触发。
CSS3 学习笔记的更多相关文章
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- CSS3学习笔记之linear-gradient
我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...
- CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
- 十天精通CSS3学习笔记 part4
CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- HTML5+CSS3学习笔记(一)
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
- CSS3学习笔记——伪类hover
最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示” ,想看看里面 “不同缓动类效果demo”例子的效果,发现了一个问题如下: .Trans_Bo ...
- css3学习笔记三
css3有些特殊的元素选择器这和jquery相似.效果图如下
- 我的CSS3学习笔记
1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val ...
- HTML5+CSS3学习笔记(一) 概述
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...
随机推荐
- timus_1007_代码字
题目要求:对于所有一个长度为N的字(这些字由0和1组成),在经过一条线路后,这些字可能会做如下的修改: 1. 0可能变成1,但只能发生一次. 2. 0或者1可能被去掉,但也只能发生一次. 3. 0或者 ...
- 基于Metronic的Bootstrap开发框架经验总结(8)--框架功能总体界面介绍
在前面介绍了一系列的<基于Metronic的Bootstrap开发框架经验总结>的随笔文章,随笔主要是介绍各个知识点的内容,对框架的总体性界面没有很好的阐述,本篇随笔主要介绍这个Boots ...
- 邻接矩阵无向图(三)之 Java详解
前面分别介绍了邻接矩阵无向图的C和C++实现,本文通过Java实现邻接矩阵无向图. 目录 1. 邻接矩阵无向图的介绍 2. 邻接矩阵无向图的代码说明 3. 邻接矩阵无向图的完整源码 转载请注明出处:h ...
- APP数据接口开发的一些经验
刚接到这样的任务时,没有感觉到任何压力,不就是给移动端应用提供数据吗?那边发来参数,这边处理数据,返回JSON.做网站开发时经常使用ajax请求后台数据,不就是这么回事吗.于是,在确认完需求后就开始干 ...
- 《ASP.NET SignalR系列》第四课 SignalR自托管(不用IIS)
从现在开始相关文章请到: http://lko2o.com/moon 接着上一篇:<ASP.NET SignalR系列>第三课 SignalR的支持平台 一.概述 SignalR常常依托于 ...
- Android Studio的git功能的使用介绍
本文介绍Android Studio(下面简称AS)中git工具的一些简单使用.因为AS为git的使用提供了很多人性化的图形界面操作,在很大程度上可以增加开发效率.本文面向新手,题主自己也是新手一枚, ...
- 高逼格前端开发工具-FIDDLER
1.Fiddler相对其他调试工具的优势 HttpWatch 和 Firebug绝大多数前端开发人员都比较熟悉,但是HttpWatch虽然可以抓到每个 HTTP 请求的全部数据,但无法修改返回的数据: ...
- 写给自己的 程序集&msil 扫盲
嘴上不说 心里却想MD 这家伙在博客园装了这么久的高手 竟然连这都不会 ,我去噢. 程序集签名 .net 下 “程序集” 什么东东 ,反正就是听着挺牛x的,其实就是指“一堆程序”从我们传统的C++封装 ...
- 在CentOS上部署Asp.Net MVC3的第一次尝试
关注mono已经很久了,现在才有时间真正的尝试一下在linux中部署asp.net的网站,也算是记录 一下自己的第一次尝试吧. 我的实践的环境是win7 + VM10 + CentOS6.5 下面就是 ...
- CIO:让IT成为企业的一种竞争优势
在你的公司,IT是将自己视为服务提供者,业务部门的合作伙伴,还是创新驱动者?其他部门的领导者是怎么看待IT的?在老板的眼里,IT是如何的一个定位?在过去一年的,身为企业的CIO,你是否知道哪些应用或新 ...