CSS3新特性-CSS3核心属性
阅读 (383)一、文本属性
1、颜色半透明
-
说明
文字颜色半透明
-
语法
{ /*color: rgba(r,g,b,a) a 是alpha 透明的意思 取值范围 0~1之间*/ color: rgba(14, 28, 231,0.3) }
2、文字阴影
-
说明
可以文字添加阴影效果了 Shadow 影子
-
语法
{text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;}
![1498467502625](CSS3 新特性.assets/1498467502625.png)
前两项是必须写的。 后两项可以选写。
span{ text-shadow:3px 4px 5px rgba(0,0,0,0.5); } <span>文本透明</span>
-
凹凸文字
<style> body { background-color: #ccc; } div { color: #ccc; font: 700 80px "微软雅黑"; } div:first-child { /* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */ text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; } div:last-child { /* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */ text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; } </style> <div>我是凸起的文字</div> <div>我是凹下的文字</div>
二、盒子属性
1、盒子阴影
{box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;}
-
注意
- 前两个属性是必须写的。其余的可以省略。
- 外阴影 (outset) 但是不能写,默认就是外阴影,想要添加内阴影 ,只有最后加上inset
-
示例
div { width: 200px; height: 200px; border: 10px solid red; /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */ /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影; */ box-shadow: 0 15px 30px rgba(0, 0, 0, .4); }
2、圆角边框
-
说明
从此以后,我们的视野里就不只有矩形,还有圆角。
-
语法格式:
{border-radius: 左上角 右上角 右下角 左下角;}
-
举例
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
div:first-child { /* 结构伪类选择器 选亲兄弟 */
border-radius: 10px; /* 一个数值表示4个角都是相同的 10px 的弧度 */
}
div:nth-child(2) {
/*border-radius: 100px; 取宽度和高度 一半 则会变成一个圆形 */
border-radius: 50%; /* 100px 50% 取宽度和高度 一半 则会变成一个圆形 */
}
div:nth-child(3) {
border-radius: 10px 40px; /* 左上角 和 右下角 是 10px 右上角 左下角 40 对角线 */
}
div:nth-child(4) {
border-radius: 10px 40px 80px; /* 左上角 10 右上角 左下角 40 右下角80 */
}
div:nth-child(5) {
border-radius: 10px 40px 80px 100px; /* 左上角 10 右上角 40 右下角 80 左下角 右下角100 */
}
div:nth-child(6) {
border-radius: 100px;
height: 100px;
}
div:nth-child(7) {
border-radius: 100px 0;
}
</style>
三、背景属性
1、背景透明
-
说明
CSS3支持背景半透明的写法语法格式是:
{background: rgba(0,0,0,0.3);}
最后一个参数是alpha 透明度 取值范围 0~1之间
-
注意
背景半透明是指盒子背景半透明, 盒子里面的内容不受影响。
2、背景缩放
-
说明
在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应用非常广泛。
-
语法
div{
width: 500px;
height: 300px;
background: rgba(255,0,0,0.3);
background-image: url('1.gif');
background-repeat: no-repeat;
/* background-size: 10%; */
/* background-size: contain; */
background-size: cover;
}
<div>背景透明</div>
<img src='1.gif' />
参数设置:
- 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)
- 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,有溢出部分则会被隐藏。平时用的cover 最多。
- 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
3、多背景设置
-
说明
CSS3不但允许我们设置背景图片的尺寸,还可以设置多背景。以逗号分隔,可用于自适应布局。
background-image:url(1.gif),url(2.jpg); /*水平起始位置,垂直起始位置 / 背景图宽 背景图高 背景颜色*/ background:url(1.gif) no-repeat scroll 10px 20px/50px 60px , url(2.jpg) no-repeat scroll 10px 20px/70px 90px , url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;
-
注意
-
如果设置的多重背景图存在着重叠关系,前面的背景图会覆盖在后面的背景图之上。
-
为了避免背景色将图像盖住,背景色通常都定义在最后一组上。
-
4、背景渐变
CSS3 渐变(gradient)可以在两个或多个指定的颜色之间显示平稳的过渡。 以前,我们必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
4.1 线性渐变语法
-
说明
在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction:默认为to bottom,即从上向下的渐变;
stop:颜色的分布位置,默认均匀分布,例如有3个颜色,各个颜色的stop均为33.33%。
-
示例1:to left、top right、to bottom、to top
/*分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“红色–绿色”渐变*/ div { background:linear-gradient(to left, red , blue) } div { background:linear-gradient(to right, red , blue) } div { background:linear-gradient(to bottom, red , blue) } /* 浏览器默认值 */ div { background:linear-gradient(to top, red , blue) }
-
示例2:to right bottom、top right top、top left bottom、top left top
/*分别产生到“右下角”、“右上角”、“左下角”、“左上角”的渐变*/ div { background: linear-gradient(to right bottom, red , blue); } div { background: linear-gradient(to right top, red , blue); } div { background: linear-gradient(to left bottom, red , blue); } div { background: linear-gradient(to left top, red , blue); }
-
示例3:使用角度渐变
角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。但是,请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准,即 0deg 将创建一个从左到右的渐变,90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度,y为非标准角度。
div { background: linear-gradient(10deg, red, blue) }
4.2 径向渐变
-
说明
径向渐变不同于线性渐变,线性渐变是从“一个方向”向“另一个方向”的颜色渐变,而径向渐变是从“一个点”向四周的颜色渐变
-
语法
background: radial-gradient(center, shape, size, start-color, ..., last-color);
-
参数
center:渐变起点的位置,可以为百分比,默认是图形的正中心。
shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样。
size:渐变的大小,即渐变到哪里停止,它有四个值。 closest-side:最近边; farthest-side:最远边; closest-corner:最近角; farthest-corner:最远角 -
语法
div { background: radial-gradient(red, green, blue); }
-
示例1:多颜色点均匀分布
div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); } div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }
以中心(50% 50%)为起点,到最远角(farthest-corner),从red到green、blue的均匀渐变
-
示例2:多颜色节点不均匀分布
div { background: radial-gradient(red 5%, green 15%, blue 60%); }
-
示例3:设置渐变形状
div { background: radial-gradient(circle, red, yellow, green); } div { background: radial-gradient(ellipse, red, yellow, green); }
circle:渐变为最大的圆形; ellipse:根据元素形状渐变,元素为正方形是显示效果与circle无异。
-
示例4:不同尺寸的渐变
size指定了渐变的大小,即渐变到哪里停止,它有四个值。 closest-side:最近边; farthest-side:最远边; closest-corner:最近角; farthest-corner:最远角
div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); } div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); } div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); } div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black); }
4.3 重复性线性渐变
-
语法
div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }
10%的位置为yellow,20%的位置为green,然后按照这20%向下重复
4.4 重复性径向渐变
-
语法
div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }
四、浏览器前缀
-
说明
由于CSS3很多属性尚未成为W3C标准的一部分,因此每种内核的浏览器都只能识别带有自身私有前缀的CSS3属性。我们在书写CSS3代码时,需要在属性前加上浏览器的私有前缀,然后该种内核的浏览器才能识别相应的CSS3属性。
浏览器前缀 浏览器 -webkit- Chrome, Safari, Android Browser -moz- Firefox -o- Opera -ms- IE, Edge -
提倡写法
-webkit-border-radius:10px; /*兼容chrome和Safari*/ -moz-border-radius:10px; /*兼容Firefox*/ -ms-border-radius:10px; /*兼容IE*/ -o-border-radius:10px; /*兼容opera*/ border-radius:10px;