新的UI方案之文本新增样式
opacity
opacity属性指定了一个元素的透明度
默认值:1.0 不可继承
可选值:0-1
0表示完全透明,1表示完全不透明,0.5半透明
IE8及以下的浏览器不支持该样式,可以使用滤镜来代替
filter:alpha(opacity=值)
这里值需要一个0-100之间的值,0相当于完全透明,100完全不透明。
新增颜色模式rgba
text-shadow(文字阴影)
text-shadow: <color> <offset-x> <offset-y> <blur-radius>;
text-shadow: 颜色(可选) 水平偏移量(必选) 垂直偏移量(必选) 模糊半径(可选);
text-shadow用来为文字添加阴影,而且可以添加多层,阴影值之间用逗号隔开。
(多个阴影时,第一个阴影在最上边)
默认值:none 可继承
值:
<color>
可选。可以在偏移量之前或之后指定。
如果没有指定颜色,则使用UA(用户代理)选择的颜色。
<offset-x> <offset-y>
必选。这些长度值指定阴影相对文字的偏移量。<br>
<offset-x> 指定水平偏移量,若是负值则阴影位于文字左边。
<offset-y> 指定垂直偏移量,若是负值则阴影位于文字上面。
如果两者均为0,则阴影位于文字正后方(如果设置了<blur-radius> 则会产生模糊效果)。
<blur-radius>可选。这是 <length> 值。如果没有指定,则默认为0。
值越大,模糊半径越大,阴影也就越大越淡。
text-shadow应用
浮雕文字效果:
字体内容设置成白色,阴影设为黑色,即可。
// 应用
<h1>
吃得苦中苦,方为人上人!
</h1>
h1{
font-size: 30px;
color: white;
letter-spacing: 2px;
text-shadow:black 1px 1px 3px;
font-family: "楷体";
}
文字模糊效果:
设置文字阴影的模糊半径,加上过渡即可
text-shadow: rgba(0,0,0,0) 1px 1px 200px;
transition: 1s;
// 示例
<h1>乘帆破浪会有时,<br />直挂云帆济沧海。</h1>
h1{
position: relative;
left: 200px;
top: 100px;
font-size: 20px;
color: red;
}
h1:hover{
color: rgba(0,0,0,0);
text-shadow: rgba(0,0,0,0) 1px 1px 200px;
transition: 1s;
}
-webkit-text-stroke(文字描边)
-webkit-text-stroke:描边线条宽度 描边线条颜色;
只有webkit内核才支持:-webkit-text-stroke
(准确的来说不能算是css3的东西,但需要知道)
text-stroke:Webkit特有属性,文字描边
参数:1.描边线条宽度
2.描边线条颜色
text-shadow也可以实现文字描边:
color: white;
text-shadow: red 1px 1px 1px,red -1px -1px 1px;
direction(文字排版)
direction:控制文字的方向
一定要配合unicode-bidi:bidi-override;来使用
direction:ltr;
unicode-bidi:bidi-override;
text-overflow :
如何向用户发出未显示的溢出内容信号。
它可以被剪切,显示一个省略号(’…’)
值:
clip: 当内联内容溢出块容器时,将溢出部分裁切掉。
ellipsis: 当内联内容溢出块容器时,将溢出部分替换为(…)。
怎样实现溢出显示省略号
white-space=no-wrap
overflow=hidden
text-overflow=ellipsis
包裹区域必须不能让子元素撑开
// 溢出显示省略号示例
p{
width:50px;
border:1px solid #000;
font:14px/30px "宋体";
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
<p>乘风破浪会有时,直挂云帆济沧海</p>
新的UI方案之盒模型新增样式
box-shadow(盒模型阴影)
box-shadow: (inset) <offset-x> <offset-y> <blur-radius> <spread-radius>;
box-shadow: (阴影在边框内) 水平偏移量 垂直偏移量 模糊半径 扩散半径;
box-shadow
以逗号分割列表来描述一个或多个阴影效果,可以用到几乎任何元素上。
如果元素同时设置了 border-radius ,阴影也会有圆角效果。
多个阴影时和多个text shadows 规则相同(第一个阴影在最上面)。
默认值: none 不可继承
值:
inset
默认阴影在边框外。
**使用inset后,阴影在边框内。**<br><br>
<offset-x> <offset-y>
这是头两个 <length> 值,用来设置阴影偏移量。<br>
<offset-x> 设置水平偏移量,如果是负值则阴影位于元素左边。<br>
<offset-y> 设置垂直偏移量,如果是负值则阴影位于元素上面。
如果两者都是0,那么阴影位于元素后面。
这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。<br><br>
<blur-radius>
这是第三个 <length> 值。值越大,模糊面积越大,阴影就越大越淡。
不能为负值。默认为0,此时阴影边缘锐利。<br><br>
<spread-radius>
这是第四个 <length> 值。取正值时,阴影扩大;取负值时,阴影.收缩。
默认为0,此时阴影与元素同样大。<br><br>
<color>
阴影颜色,如果没有指定,则由浏览器决定
-webkit-box-reflect(倒影)
-webkit-box-reflect: 倒影的方向(above, below, right, left) 倒影的距离(长度) 渐变;
-webkit-box-reflect 设置元素的倒影(准确的来说不能算是css3的东西,但需要大家知道)
默认值:none 不可继承
值:**(必须是123的顺序)**
倒影的方向:
第一个值,above, below, right, left<br>
倒影的距离:
第二个值,长度单位<br>
渐变:
第三个值
resize(用户可调整元素大小)
resize: none / both / horizontal / vertical;
overflow: auto;
// 一定要配合overflow:auto使用
默认值:none 不可继承
值:
none
元素不能被用户调整大小。
both
允许用户在水平和垂直方向上调整元素的大小。
horizontal
允许用户在水平方向上调整元素的大小。
vertical
允许用户在垂直方向上调整元素的大小。
box-sizing(怪异盒模型)
box-sizing: content-box(正常,默认值)/border-box(包括边框);
box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。
可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
默认值:content-box 不可继承
值:
content-box
默认值,标准盒子模型。 width 与 height 只包括内容的宽和高,
不包括边框(border),内边距(padding),外边距(margin)。
**注意**: 内边距, 边框,外边距 都在这个盒子的外部。
比如. 如果 .box {width: 350px};而且 {border: 10px solid black;}
那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式:
width = 内容的宽度,
height = 内容的高度。
宽度和高度都不包含内容的边框(border)和内边距(padding)。
border-box<br>
width 和 height 属性包括内容,内边距和边框,但不包括外边距。
这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。
这里的维度计算为:
width = border + padding + 内容的 width,
height = border + padding + 内容的 height。
新的UI方案之新增UI样式
border-radius(圆角)
border-radius
border-top-left-radius,
border-top-right-radius,
border-bottom-right-radius,
border-bottom-left-radius
传统的圆角生成方案,必须使用多张图片作为背景图案。
CSS3圆角的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:
减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再需要了。
提高网页性能。由于不必再发出多余的HTTP请求,网页的载入速度将变快。
增加视觉可靠性。某些情况下(网络拥堵、服务器出错、网速过慢等等),
背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况。
>border-radius
用来设置边框圆角。
**当使用一个半径时确定一个圆形;当使用两个半径时确定一个椭圆,
这个(椭)圆与边框的交集形成圆角效果。**
默认值 : 0 不可继承
值:
固定的px值定义圆形半径或椭圆的半长轴,半短轴。不能用负值。
使用百分数定义圆形半径或椭圆的半长轴,半短轴。
水平半轴*相对于*盒模型的宽度;垂直半轴*相对于*盒模型的高度。不能用负值。
border-radius这是一个简写属性,用来设置
border-top-left-radius,
border-top-right-radius,
border-bottom-right-radius ,
border-bottom-left-radius
半径的第一个语法取值可取1~4个值:
border-radius: radius
border-radius: (左上,右下)(右上、左下)
border-radius: (左上)(右上、左下)(右下)
border-radius: (左上)(右上)(右下)(左下)
半径的第二个语法取值也可取1~4个值
border-radius: (first radius values) / radius
border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left
border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right
border-radius: (first radius values) / top-left top-right bottom-right bottom-left
**注意**: 尽量不要用百分比值
百分比值
在旧版本的 Chrome 和 Safari 中不支持。(fixed in Sepember 2010)
在 11.50 版本以前的 Opera 中实现有问题。
Gecko 2.0 (Firefox 4) 版本前实现不标准:水平半轴和垂直半轴都相对于盒子模型的宽度。
在旧版本的 iOS (iOS 5 之前) 和 Android 中 (WebKit 532 之前) 不支持。
border-image(边框图片)
border-image
CSS属性,允许在元素的边框上绘制图像。。这使得绘制复杂的外观组件更加简单。
使用 border-image 时,其将会替换掉 border-style 属性所设置的边框样式
默认值: 不可继承
border-image-source: none(添加一个URL)
border-image-slice: 100%(图片切割)(fill 关键词中间部分将会被作为 background-image)
border-image-width: 1(定义图像边框宽度。 )
border-image-outset: none(属性定义边框图像可超出边框盒的大小)
border-image-repeat: stretch(拉伸) || repeat,round(平铺)
border-image-source
定义使用一张图片来代替边框样式;如果只为none,则仍然使用border-style 定义的样式。
默认值:none
border-image-source: url("img/border-image.png");
border-image-slice
通过规范将 border-image-source 的图片明确的分割为9个区域:
四个角,四边以及中心区域。并可指定偏移量
默认值:100% 不可继承
**值的百分比参照于image本身!!**
所有的边
border-image-slice: 30%;
垂直方向 | 水平方向
border-image-slice: 10% 30%;
顶部 | 垂直方向 | 底部
border-image-slice: 30 30% 45;
上 右 下 左
border-image-slice: 7 12 14 5 ;
中间的区域将不会被边框使用,但当设置有 fill 关键词时将会被作为 background-image。
这个关键词可以被设置在属性的任何一个位置(前面、后面或者两个值之间)
使用fill(fill可以放在任意位置)
border-image-slice: 10% 7 12 fill;
border-image-repeat
定义图片如何填充边框。
或为单个值,设置所有的边框;或为两个值,分别设置水平与垂直的边框。
默认值:stretch 不可继承
值:
stretch (拉伸)<br>
repeat,round(平铺)
border-image-width
定义图像边框宽度。
默认值:1 不可继承
border-image-outset
定义边框图像可超出边框盒的大小
默认值:0 不可继承
正值: 可超出边框盒的大小
background
css2中的background
background-color
设置元素的背景色
默认值: transparent 不可继承
background-image
用于为一个元素设置一个或多个背景图像,图像在绘制时,
以z轴方向堆叠的方式进行。先指定的图像会在之后指定的图像上面进行绘制。
**注意**:background-color会在image之下进行绘制,边框和内容会在image之上进行绘制
默认值:none 不可继承
background-repeat
属性,背景图像的重复方式。
背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。
默认值:repeat 不可继承
值:
repeat-x = repeat no-repeat
repeat-y = no-repeat repeat
repeat = repeat repeat
no-repeat = no-repeat no-repeat
第一个值代表水平方向。
第二个值代表垂直方向。
background-position
指定背景位置的初始位置
默认值:0% 0% 不可继承
值:
**百分比** :*参照尺寸为背景图片定位区域的大小减去背景图片的大小*
第一个值:元素在水平方向的位移
第二个值:元素在垂直方向的位移
**关键字**:
top left and left top
Same as '0% 0%'.
top, top center, and center top
Same as '50% 0%'.
right top and top right
Same as '100% 0%'.
left, left center, and center left
Same as '0% 50%'.
center and center center
Same as '50% 50%'.
right, right center, and center right
Same as '100% 50%'.
bottom left and left bottom
Same as '0% 100%'.
bottom, bottom center, and center bottom
Same as '50% 100%'.
bottom right and right bottom
Same as '100% 100%'.
如果只有一个值被指定,则这个值就会默认设置背景图片位置中的水平方向,
与此同时垂直方向的默认值被设置成50%。
background-attachment
决定背景是在视口中固定的还是随包含它的区块滚动的。
默认值:scroll 不可继承
值:
**fixed**
此关键字表示背景相对于视口固定。
即使一个元素拥有滚动机制,背景也不会随着元素的内容滚动 。<br>
**scroll**
此关键字表示背景相对于元素本身固定, 而不是随着它的内容滚动
css3中的background
background-origin:
设置背景的渲染的起始位置
值:
border-box
padding-box
content-box
background-clip:
指定对象的背景图像向外裁剪的区域。
取值:
border-box: 从border区域(含border)开始向外裁剪背景。
padding-box:从padding区域(含padding)开始向外裁剪背景。
content-box: 从content区域开始向外裁剪背景。
text: 从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果。
background-size
设置背景图片大小
默认值:auto auto 不可继承
值:
百分比:指定背景图片相对背景区(background positioning area)的百分比。
背景区由background-origin设置,默认为盒模型的内容区与内边距
auto: 以背景图片的比例缩放背景图片。
contain:图片宽或高完全覆盖内容区,原图比例不变
cover:图片完全覆盖内容区,图片可能会失真
>注意:
单值时,这个值指定图片的宽度,图片的高度隐式的为auto
两个值: 第一个值指定图片的宽度,第二个值指定图片的高度
background
background 是CSS简写属性,用来集中设置各种背景属性。
background 可以用来设置一个或多个属性:
background-color,
background-image,
background-position,
background-repeat,
background-size,
background-attachment。
默认值: 不可继承
background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent
顺序无关
渐变
线性渐变
linear-gradient(); // 线性渐变
repeating-linear-gradient(60deg,red 0,blue 30%); // 重复的线性渐变
双颜色值的线性渐变:
background-image:linear-gradient(red,blue);
多颜色值的线性渐变:
background-image:linear-gradient(red,blue,pink,black);
改变渐变方向:
background-image:linear-gradient(to top left,red,blue);
使用角度:
background-image:linear-gradient(0deg,red,blue);
控制颜色节点的分布:
background-image:linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 30%,blue 50%,indigo 70%,violet 80%);
透明度的渐变:
background-image:linear-gradient(90deg,rgba(255,0,0,0) 50%,rgba(255,0,0,0.5),rgba(255,0,0,1) 60%);
重复渐变:
background: repeating-linear-gradient(90deg,red 10%,blue 30%);
径向渐变
radial-gradient()
repeating-radial-gradient();
双颜色值的径向渐变:
background-image:radial-gradient(red,blue);
多颜色值的径向渐变:
background-image: radial-gradient(red,blue,pink,black);
不均匀分布:
background-image:radial-gradient(red 50%,blue 70%);
改变渐变形状:(ellipse(默认为椭圆) || circle )
background-image:radial-gradient(ellipse,red,blue);
渐变形状的尺寸大小:
background-image:radial-gradient(farthest-corner ellipse,red,blue);
closest-side 最近边
farthest-side 最远边
closest-corner 最近角
farthest-corner 最远角 (默认值)
改变圆心:
background-image:radial-gradient(closest-corner circle at 10px 10px,red,blue);
重复渐变:
background-image:repeating-radial-gradient(closest-corner circle,red 30%,blue 50%);