主要内容:
- word-wrap属性,用来容纳溢出的文本
word-wrap: break-word ;
尤其针对带有URL的文本。 - border-radius属性,用来实现圆角
- 实现一个圆形:
width: 10em;
height: 10em;
-moz-border-radius: 5em;
-webkit-border-radius: 5em;
border-radius: 5em; //无前缀属性必须被置于最末
实现一个纯CSS三角形的要素是:将一个元素的width和height设为0,然后为它设置较粗的边框,并将其中三个边框的颜色设为透明,你还可以为相邻边框设置不同的边框宽度来改变三角形的角度。
HSLA色彩模式,用来创建半透明的背景
CSS3的RGBA和HSLA色彩模式
HEX:#A6DADC
RGB: 166,218,220
RGBA: 166,218,220,1
HSL(色调、饱和度、亮度): 182,44%,76%
HSLA: 182,44%,76%,1
基于浏览器的取色器:FIrefox扩展Rainbow-
HSL/HSLA模式的色彩速查表
- 0或360 = red
- 30 = orange
- 60 = yellow
- 120 = green
- 180 = cyan(青色)
- 240 = blue
- 270 = purple
- 300 = magenta(紫色)
黑色即亮度为0%,,白色亮度100%
灰色饱和度值0%,亮度值控制灰色明暗程度
linear-gradient方法,用来实现背景渐变
起始色hsla(0, 0%, 100%, .6),终止色hsla(0, 0%, 100%, 0) 30px),终止色位置30px。
background-image: -moz-linear-gradient(
hsla(0, 0%, 100%, .6),
hsla(0, 0%, 100%, 0) 30px);
指定渐变方式linear,水平垂直起始点(0 0),终止点(0 30),起始色和终止色
background-image: -webkit-gradient(
linear, 0 0, 0 30,
from(hsla(0, 0%, 100%, .6)),
to(hsla(0, 0%, 100%, 0)));
- box-shadow属性,用来实现物件的阴影
box-shadow: 1px 1px 2px hsla(0, 0%, 0%, .3);
- text-shadow属性,用来实现文字的阴影
text-shadow: 1px 1px 0 hsla(0, 0%, 100%, .7);
- transform属性,用来旋转物件
transform: rotate(-5deg);