1. border-radius
向 div 元素添加圆角边框
例子 2
border-radius: 2em 1em 4em / 0.5em 3em;
等价于:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
2. box-shadow
值h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。请参阅 CSS 颜色值。
inset可选。将外部阴影 (outset) 改为内部阴影。
测试
3. border-image
border-image: url(/i/border_image_button.png) 0 14 0 14 stretch
4. 背景盒子(background-size background-clip background-origin)
border-box padding-box content-box
5. CSS3 文本阴影 text-shadow text-wrap文本换行
实例:text-shadow:2px 2px 8px #ff0000;
6. CSS3 字体 @font-face
在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3,web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
7. CSS3 2D转换
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
- 首先是函数transform:配合以下几个使用
- tranlate移动
- rotate 旋转
- scale 尺寸大小
- skew 倾斜
- matrix矩阵吧,啥都可以干,需要6个参数
8. CSS3 3D转换————下次补充
9. CSS3过渡:transition
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
它如何工作?
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长(注释:如果时长未规定,则不会有过渡效果,因为默认值是 0。)
transition-property 属性规定应用过渡效果的 CSS 属性的名称。
transition-duration 属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。
transition-timing-function 属性规定过渡效果的速度曲线。
transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: ease-in;
{transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.42,0,0.58,1);
- transition-delay 属性规定过渡效果何时开始。