hi,欢迎访问本站!
当前位置: 首页学习笔记正文

015day(css控制单词换行的属性,css设置中英文大小写的属性,背景渐变)

用户投稿 学习笔记 381阅读

一、css控制单词换行的属性

1、word-break自己决定自动换行的处理方法

①word-break:normal:使用浏览器默认的换行规则。(英文)

②word-break:keep-all:不允许中文字断开,以符号作为换行的标志。

③word-break:break-all:允许在单词内换行,可以强行截断英文单词,达到词内换行效果。

2、word-wrap用来标明是否允许浏览器在单词内进行断句

①word-wrap:normal  默认值。

②word-wrap:break-word:在长单词或 URL 地址内部进行换行。将内容在边界内换行(不截断英文单词换行)。

二、css设置中英文大小写的属性

1、text-transform控制文本的大小写(转的是小写字母)

①text-transform :capitalize;文本中的每个单词以大写字母开头。

②text-transform :uppercase;定义仅有大写字母

③text-transform :lowercase;定义无大写字母,仅有小写字母。

④text-transform :none;默认值

2、font-variant 设置文本的大小写

①font-variant:normal;默认值

②font-variant:small-caps;浏览器会显示小型大写字母的字体

三、背景渐变

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

CSS3 定义了两种类型的渐变(gradients):

线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

径向渐变(Radial Gradients)- 由它们的中心定义

可以指定哪个方向代码如下

加完浏览器内核不能加to

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

CSS3 定义了两种类型的渐变(gradients):

线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

径向渐变(Radial Gradients)- 由它们的中心定义

浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本。后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本。

1、线性渐变

为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。

线性渐变 - 从上到下(默认情况下)

#grad {

background-image: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */

background-image: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */

background-image: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

background-image: linear-gradient(red, blue); /* 标准的语法 */

}

线性渐变

线性渐变 - 从左到右

#grad {

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(left, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(left, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, red , blue); /* 标准的语法 */

}

线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色:

#grad {

background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(left top, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(left top, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */

}

带有指定的角度的线性渐变 

#grad {

background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(180deg, red, blue); /* 标准的语法 */

}

线性渐变总结:

线性渐变的方向默认从上到下

background/background-image:

linear-gradient(2-多个颜色【颜色中间用逗号分隔】)

linear-gradient(to 方向【1-2个】,2-多个颜色【颜色中间用逗号分隔】)

linear-gradient(度数deg 方向【1-2个】,2-多个颜色【颜色中间用逗号分隔】)

加浏览器内核

方向:方向没有to直接跟的方向【两个方向的时候 浏览器加内核的识别标准和统一标准不一样】

度数:从右边开始逆时针的方向进行

2、径向渐变

带有指定的角度的线性渐变 

CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。

径向渐变 - 颜色结点均匀分布(默认情况下) 

#grad {

background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */

background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */

background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */

background: radial-gradient(red, green, blue); /* 标准的语法 */

}

背景的径向渐变 - 颜色结点不均匀分布 

#grad {

background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);

/* Safari 5.1 - 6.0 */

background: -o-radial-gradient(red 5%, green 15%, blue 60%);

/* Opera 11.6 - 12.0 */

background: -moz-radial-gradient(red 5%, green 15%, blue 60%);

/* Firefox 3.6 - 15 */

background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */

}【百分比从小到大写】

设置形状,shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。 

#grad {

background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */

background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */

background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */

background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */

}

CSS的重复渐变

线性渐变和径向渐变都属于CSS背景属性中的背景图片(background-image)属性。有时候希望创建在一个元素的背景上重复的渐变“模式”。在没有重复渐变的属性之前,主要通过重复背景图像(使用background-repeat)创建线性重复渐变,但是没有创建重复的径向渐变的类似方式。幸运的是,CSS3通过repeating-linear-gradient和repeating-radial-gradient语法提供了补救方法,可以直接实现重复的渐变效果。

A、重复的线性渐变 repeating-linear-gradient() 函数用于重复线性渐变:

B、重复的径向渐变 repeating-linear-gradient函数用于重复径向渐变:

径向渐变总结:

从中心向四周扩散发出,默认为椭圆状

语法background/background-image:radial-gradient:(2-多个颜色)

在颜色后面添加百分比(从小到大顺序)

形状,颜色

-webkit-radial-gradient(方位颜色)

方位,形状,颜色

重复渐变:repeating(颜色必须跟百分比,否则无法形成重复的渐变的效果)

四、背景相关属性

1、background-clip指定背景的显示范围

①background-clip:border-box;  默认值

②background-clip:padding-box;背景被裁剪到内边距框

③background-clip:content-box;背景被裁剪到内容框

④-webkit-background-clip:text ;

2、background-origin绘制背景图像时的起点

①background-origin:padding-box  默认值;

②background-origin:border-box  背景图像相对于边框盒来定位

③background-origin:content-box  背景图像相对于内容框来定位

3、background-size背景图的大小

①background-size:200px  100px;  或者  background-size:200%  100%;

②background-size:cover;把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

③background-size:contain;  保持背景图像本身的宽高比例不变进行缩放。

总结:关于背景大小的总结background-size:需要调整背景图片的大小 四类:像素值【单个(宽度设置为固定的像素值,高度百分比增加)/2个像素值(第一个代表宽度,第二个代表高度)】;百分比【单个/2个 参照像素值】 cover背景图片把整个背景全部覆盖;contain一边铺满,另一边等比增加

五、过渡效果

1、transition-property需要过渡的样式 ,默认是 all

2、transition-duration运动时间 默认是 0 s    

3、transition-delay 延迟时间 默认是 0 s 

4、transition-timing-function

运动形式   默认是 ease

A.ease:(慢速开始,然后变快,然后慢速结束) 

B. linear:(匀速)  ease-in:(加速)

C.ease-out:(减速)

D.ease-in-out:(先加速后减速)

E.cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 )http:cubic-bezier.com

F.steps() 实现一个关键逐帧动画的功能

标签:
声明:无特别说明,转载请标明本文来源!
发布评论
正文 取消