CSS3学习笔记

2016-06-15  本文已影响49人  小锋子_Gruad

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 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

  1. 首先是函数transform:配合以下几个使用
  2. tranlate移动
  3. rotate 旋转
  4. scale 尺寸大小
  5. skew 倾斜
  6. matrix矩阵吧,啥都可以干,需要6个参数

8. CSS3 3D转换————下次补充

9. CSS3过渡:transition

通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

它如何工作?

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:

  1. 规定您希望把效果添加到哪个 CSS 属性上

  2. 规定效果的时长(注释:如果时长未规定,则不会有过渡效果,因为默认值是 0。)

  3. transition-property 属性规定应用过渡效果的 CSS 属性的名称。

  4. transition-duration 属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。

  5. 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);

  1. transition-delay 属性规定过渡效果何时开始。
上一篇 下一篇

猜你喜欢

热点阅读