作者:tiancai啊呆
CSS很简单也很常用,但是经常有一些相似的属性让人傻傻分不清楚,今天列举一下自己经常分不清楚的一些属性。(使用简单的例子对他们进行区分说明)
- 关于nth-child与nth-of-type。
例子:
//html 部分
<div>
<h4>我是H4</h4>
<p>我是第一个段落</p>
<p>我是第二个段落</p>
</div>
//css部分
p:nth-child(2) {
color: red;
}
p:nth-of-type(2) {
color: greenyellow;
}
结果:
结果
通过结果我们可以知道,它们是有区别的。区别如下:
p:nth-child(2)的条件是:父元素的第二个子元素且该元素是p元素。如果第二个子元素不是p元素,则样式无效。
p:nth-of-type(2)的条件是:父元素下的第二个p元素。
- 关于不透明度
我们使用opacity来设置元素的不透明度,0表示完全透明,1表示完全不透明。对于IE8及其以下的浏览器来说,我们需要使用滤镜来实现透明的效果。
代码如下:
opacity: 0.5; //值为0-1之间
filter:Alpha(opacity=50); //值为0-100之间
- 关于渐变
渐变主要分为线性渐变和径向渐变。- 线性渐变
语法:linear-gradient(direction, color-stop1, color-stop2, ...);
direction
:表示渐变方向,可以为top,left,right,bottom关键字或者一个角度。
color-stop
:表示渐变的颜色和位置,值可以是颜色值或者带着位置的颜色值,如red 10%
示例:
/*从左到右的渐变*/ background: -webkit-linear-gradient(left, red , blue); background: -o-linear-gradient(left, red, blue); background: -moz-linear-gradient(left, red, blue); background: linear-gradient(to right, red , blue); /*从左到右的渐变, 部分浏览器90deg将创建一个从下到上的渐变*/ background: -webkit-linear-gradient(90deg, red , blue); background: -o-linear-gradient(90deg, red, blue); background: -moz-linear-gradient(90deg, red, blue); background: linear-gradient(90deg, red , blue);
- 径向渐变
语法:background: radial-gradient(position, shape size, color-stop1, color-stop2, ...);
position
:表示径向渐变的中心位置,可以为top,left,right,bottom,center关键字或者百分比;
shape
:表示渐变的形状, circle 表示圆形,ellipse 表示椭圆形;
size
:表示渐变的大小, closest-side:最近边; farthest-side:最远边; closest-corner:最近角; farthest-corner:最远角;
color-stop
:表示渐变的颜色和位置;
示例:
background: -webkit-radial-gradient(circle, red, yellow, green); background: -o-radial-gradient(circle, red, yellow, green); background: -moz-radial-gradient(circle, red, yellow, green); background: radial-gradient(circle, red, yellow, green);
- 线性渐变
太阳
可以利用渐变做出很多炫酷的效果,大家多多实践啦。
- 关于换行
- word-break 属性,指定非中日韩的文本换行规则。值主要有以下几种:
keep-all
:只能在半角空格或连字符处换行。
break-all
:允许在单词内换行。 - word-wrap 属性,允许长的内容可以自动换行。
break-word
:长的内容强制换行。
- word-break 属性,指定非中日韩的文本换行规则。值主要有以下几种: