Gather ye rosebuds while ye may

CSS3笔记


当时看w3school的CSS3时记下来的一些(私以为)容易忽略的要点,写下来再加深印象。

边框

border-radius: 1-4 length|% / 1-4 length|%;

1
2
border-radius:2em;
border-radius: 2em 1em 4em / 0.5em 3em;

  • 1个值:(top, right, bottom, left);
  • 2个值:(top, bottom), (left, right);
  • 3个值:top, (left, right), bottom;
  • 4个值:(top), (right), (bottom), (left);

box-shadow: h-shadow v-shadow blur spread color inset;

1
2
box-shadow: 10px 10px 5px #888888;
box-shadow: 2px 2px 3px #aaaaaa;

border-image: <'border-image-source'> || <'border-image-slice'> [/ <'border-image-width'> |/ <'border-image-width'>? /<'border-image-outset'> ]? || <'border-image-repeat'>
1
2
border: 10px solid gray;
border-image: url(test.png) 10/10px;


背景

background-size: length|percentage|cover|contain;

1
2
background-size:35% 100%;
background-size:80px 60px;

background-origin: padding-box|border-box|content-box;
padding-box根据padding定位
border-box根据margin定位
content-box根据content定位
background-clip: padding-box|border-box|content-box;
padding-box在padding内绘制
border-box在margin内绘制
content-box在content内绘制
关于上面这两个的区别运用,看这一篇文章,写的真好。


文本

text-shadow: h-shadow v-shadow blur color;

1
2
text-shadow: 5px 5px 5px #FF0000;
text-shadow: 0 0 3px #FF0000;

word-wrap: normal|break-word;
word-break: normal|break-all|keep-all;
关于上面这两个的区别运用,看这一篇文章
主要区别是,word-wrap是另起一行后分割,word-break是直接分割。


字体

1
2
3
4
5
6
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}

这里是一个多浏览器支持的例子:

1
2
3
4
5
6
7
8
  @font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

先引入,后同系统已有字体使用。