01.半透明边框

02.多重边框

03.灵活的背景定位

04.边框内圆角

05.条纹背景

垂直条纹

斜向条纹

06.网格

波点

棋盘

07.伪随机渐变

08.连续图像边框

09.自适应的椭圆

半椭圆

四分之一椭圆

10.平行四边形

11.菱形图片

12.切角效果

13.梯形标签页

14.简单的饼图

静态饼图

15.单侧投影

邻边投影

双侧投影

16.不规则投影

17.染色效果

18.毛玻璃效果

“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.” — Oscar Wilde, The Picture of Dorian Gray

19.折角效果

20.连字符断行

“The only way to get rid of a temptation is to yield to it.”

21.插入换行

Name:
Lea Verou
Email:
lea@verou.me leaverou@mit.edu
Location:
Earth

22.文本行的斑马条纹

if (something) {
    // then
} else {
    // else
}
            

23.调整Tab的宽度

I	use	tab-size	4

24.连字(失效)

常见的连字: fi ff fl ffi

酌情连字: st ct

25.华丽的&符号(失效)

HTML & CSS

26.自定义下划线(失效)

“The only way to get rid of a temp­ta­tion is to yield to it.”

27.凸版印刷效果

“The only way to get rid of a temp­ta­tion is to yield to it.”

空心字效果

CSS

文字外发光效果

Glow

文字凸起效果

CSS

28.环形文字

circular reasoning works because

29.选用合适的鼠标光标

30.扩大可点击区域

31.自定义复选框




开关式按钮


32.通过阴影来弱化背景

33.通过模糊来弱化背景

34.滚动提示

35.交互式图片对比控件

36.自适应内部元素

Let’s assume we have some text here.

The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer ever.

We also have some more text here. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta.

37.自适应内部元素

With table-layout: auto

If we don’t… specify a cell width, they will be assigned one that depends on their contents. Notice how the cell with the more content here is much wider.
If we don’t… specify a cell width, they will be assigned one that depends on their contents. Notice how the cell with the more content here is much wider.
All rows take part in calculating the widths, not just the first one. Notice how the dimensions here are different than the previous example.
If we specify a width, it will not always be followed. I have a width of 1000px …and I have a width of 2000px. Because there’s not enough space for 3000px, they are reduced proportionally, to 33.3% and 66.6% of the total width.
If we prevent word wrapping, the table can become so wide it grows beyond its container. …and text-overflow: ellipsis doesn’t help either.
Large images and blocks of code can also cause the same issue.

38.根据兄弟元素的数量来设置样式

39.满幅的背景,定宽的内容

Fluid background,
fixed content

Heading

Bacon ipsum dolor amet voluptate et shoulder, ipsum flank tongue exercitation commodo sed beef ribs drumstick in venison laborum. Laboris ut enim id drumstick, et aute esse. Consequat ad kielbasa anim pork loin turkey qui cupidatat drumstick doner labore. Nulla sirloin jerky do sed magna meatloaf. Ribeye ea ut elit leberkas laboris sausage corned beef drumstick cillum non.

Another heading

Nostrud landjaeger cillum beef cow tail cupidatat non mollit voluptate jowl. Enim sunt in, flank hamburger proident qui. Id aute excepteur chuck magna tempor ipsum pork chop t-bone. Frankfurter meatball pork loin beef et leberkas pork. Pig ball tip pancetta in.

Ribeye in veniam ipsum flank. Elit incididunt t-bone proident meatball. Porchetta exercitation prosciutto sausage chuck ut eu brisket shank pastrami turkey sunt laboris tenderloin anim. Landjaeger do venison laboris kevin.

40.垂直居中

Center me, please!

41.紧贴底部的页脚

Site name

Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta. Qui drumstick tail, bacon leberkas shoulder capicola laborum. Minim ipsum bacon, mollit laboris t-bone pariatur. Ham hock reprehenderit sint beef, sausage pig eiusmod t-bone shankle strip steak.

Cow enim excepteur, boudin dolore lorem magna fugiat consequat voluptate. Picanha fugiat chicken, cupim aliquip magna filet mignon prosciutto ut nostrud. Kielbasa rump frankfurter sunt corned beef. Andouille in cillum deserunt, rump et picanha landjaeger tongue anim.

Ad meatball ipsum ground round shank. Quis ipsum meatball exercitation. Laborum swine spare ribs, sunt ball tip magna t-bone venison. Velit doner voluptate non occaecat do ribeye kevin strip steak et. Esse biltong shank ribeye dolor pariatur aute deserunt non est eiusmod pork belly pancetta pork chop. Pork chop id consectetur rump, meatball short loin brisket tail andouille deserunt alcatra irure prosciutto do.

Dolore reprehenderit ex, meatball doner commodo consectetur ea ribeye. Ad aliqua kevin, chuck excepteur minim et cow esse ham hock landjaeger. Alcatra bresaola dolore tempor do, excepteur in velit flank officia dolore meatloaf corned beef picanha. Eu pancetta brisket eiusmod ipsum aute sausage, culpa rump shoulder excepteur nostrud venison sed pork loin. Tempor proident do magna ground round. Ut venison frankfurter et veniam dolore. Pig pork belly beef ribs kevin, doner exercitation magna esse shankle.

Flank anim chuck boudin id consectetur bresaola ham pork loin cupim andouille frankfurter. Proident do ball tip nostrud nulla sed, frankfurter ut commodo corned beef ut. Ex aute in, pig deserunt beef ribs turducken pastrami irure ball tip pork belly pork chop sausage id. Chicken sunt nisi tempor sed. In eiusmod non fatback tempor tenderloin pastrami adipisicing cow lorem ut tail jerky cupidatat venison. Jowl consequat commodo pork loin ipsum pork belly prosciutto aute beef. Ball tip shoulder aliqua, fugiat landjaeger kevin pork chop beef ribs leberkas hamburger cillum turkey ut doner culpa.

42.垂直居中

43.逐帧动画

Loading…

44.闪烁动画

45.打字动画

CSS is awesome!

46.状态平滑的动画

47.沿环形路径平移的动画