您现在的位置是:首页 > 前端学习 > Web前端Web前端

文本、背景、边框不再单调(第十三章)(图文)

第十三双眼睛2020-03-01【Web前端】人已围观

简介再制作网页的时候,经常会围绕文本,背景和边框几个方面进行样式表设置,但在CSS2.0中,如果涉及如阴影、圆角、多重背景等效果,常常因为不能实现,转而寻求其他办法,再颜色选择及半透明颜色使用方面也极不方便,这些问题,再CSS3中都有很好的解决方案。本章知识点如下:
1文本与字体的设计
2色彩模式和不透明度的设置
3背景和边框的使用

文本与字体
再网页设计中,丰富的文本修饰效果,不但可以增添网页的趣味性,看起来更舒服,再CSS3中,在文本修饰方面,可以给其增加阴影,描边和发光的效果,在排版方面,可以对溢出进行良好的控制,甚至是特殊少见的字体,也能在客户端显示良好。

多样化的文本阴影-text-shadow属性
在网页设计中,通常会给文本添加阴影,描边和发光等,以实现更加丰富的视觉效果,CSS3中的阴影属性text-shadow不但可以给文本添加阴影,还可以实现文本的描边和发光效果。
1参数说明
阴影属性的使用方法如下:
text-shadow:length  length  opacity  color
参数取值说明:
length:是由浮点数字和长度单位组成的长度值,可以为负值,两个length分别表示阴影在水平方向和垂直方向上相对文字本身的偏移距离。
opacity:是由浮点数字和长度单位组成的长度值,不可以为负值,表示隐隐效果模糊作用的距离,该值可以省略,表示模糊作用的距离为0,即没有模糊作用效果
color:颜色值,表示阴影的颜色。
文本的阴影、描边,发光效果,就是这些参数不同组合的结果。
例子:文本的阴影效果
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文字阴影</title>
        <style type="text/css">
            p{
                font-family: "微软雅黑";
                font-weight: bold;
                font-size: 20px;
                color: #f90;
                text-shadow: 5px 5px 5px #333;
            }
        </style>
    </head>
    <body>
        <p>
            阴影属性<br/>
            text-shadow
        </p>
    </body>
</html>


效果如下图所示:

文本的描边效果
我们可以利用text-shadow属性的特性,同时在上下作用4个方向上为文字设置多个阴影,且不设置模糊作用距离,就可以实现文本的描边效果了。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文本的描边效果</title>
        <style type="text/css">
            p{
                padding: 50px;
                font-family: "微软雅黑";
                font-weight: bold;
                font-size: 20px;
                background-color: #ccc;
                color: #ddd;
                text-shadow: -1px 0    #333,
                             0    -1px #333,
                             1px  0    #333,
                             0    1px  #333;
            }
        </style>
    </head>
    <body>
        <p> 
            阴影属性
            <br />
            text-shadow
        </p>
    </body>
</html>


效果如下图所示


文本的发光效果
我们也可以利用text-shadow属性的特性,不设置水平和垂直的偏移距离,仅设置模糊作用距离,就可以通过修改模糊值来实现强度不同的发光效果了
例子:文字发光
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文字发光</title>
        <style type="text/css">
            p{
                padding: 50px;
                font-family: "微软雅黑";
                font-weight: bold;
                font-size: 36px;
                background-color: #333;
                color: #f90;
                text-shadow: 0 0 10px #fff;
            }
        </style>
    </head>
    <body>
        <p>阴影属性<br />
            text-shadow
        </p>
    </body>
</html>

实际效果如下图所示

溢出文本处理text-overflow属性
一个良好的页面,会限制列表结构的宽度,如果遇到文本过长,则会导致文本溢出,将会打乱页面的整体布局,需要截断显示,为了显示友好,CSS3新增了溢出文本的处理属性text-overflow  语法如下:text-overflow clip  ellipsis  ellipsis-word
值clip 表示直接裁切溢出的文本,值ellipsis表示文本溢出时,显示省略标记,省略标记代替最后一个字符,值ellipsis-word也表示文本溢出,显示省略标记,但是省略标记代替的是最后一个次。
例子:溢出文本省略标记
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>溢出文本省略标记</title>
        <style type="text/css">
            li{
                list-style: none;
                line-height: 22px;
                font-size: 16px;
                border-bottom: 1px solid #CCCCCC;
                width: 220px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>能补完破碎的人生的梦,流水亦无有恋人,不像是人们的新宠,光明的时候诗人。</li>
            <li>诗人们早就没有回来,能补完破碎的人生,是你不可不回家去的时候了,假使一世没有太阳吗。</li>
            <li>无尽的流水是悠久的晨间,幸福是梦的灵魂,过着幸福的人们的生活,创造新生命的花园的园丁,如果我是她的生命的象征,我想知道诗人最高的理想。</li>
        </ul>
    </body>
</html>


效果如下图所示:

对齐的文字才好看word-wrap 和word-break属性
一个布局很好的页面,也常常会应为换行,导致整个页面参差不齐,CSS3采用了IE发展的word-wrap和word-break属性这两个属性在IE中一直被支持
边界换行属性word-wrap,设置或检索当前行超过指定容器的边界时是否断开转行,其语法如下。
word-wrap :normal  break-word
取值说明,值normal为默认的连续文本换行,允许内容超出边界,值wordbreak表示内容将在边界内换行,如果需要,词内换行也会发生
例子:网址的边界换行
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>边界换行</title>
        <style type="text/css">
            p{
                font-family: "微软雅黑";
                border: 1px solid #CCCCCC;
                padding: 10px;
                width: 220px;
                font-size: 18px;
                word-wrap: normal;
            }
        </style>
    </head>
    <body>
        <p>
            能补完破碎的人生的梦,流水亦无有恋人,不像是人们的新宠,光明的时候诗人。
诗人们早就没有回来,能补完破碎的人生,是你不可不回家去的时候了,假使一世没有太阳吗。
在他们的脸上,这样低微的声音没有语言,这便是生活的人,恋人是不可无的。
有风俗的情绪,我生命的慰安。
        </p>
    </body>
</html>

当word-wrap的属性值设置为normal时,当连续的文本过长时,会超出边界显示,如果word-wrap属性值为break-word,则网址不会超出边界显示
字内换行属性word-break
设置或检索对象内文本的字内换行行为,尤其在多种语言时,对于中文,应该使用break-all,语法如下;
word-break :normal  break-all  keep-all
取值说明,值normal,依照亚洲语言和非亚洲语言的文本规则,允许在字内换行,值break-all该行为与亚洲语言的normal相同,也允许非亚洲语言文本行的任意字内断开,该值适合包含日文不允许字断开,适合包含少量亚洲文本的非亚洲文本。
例子:文字内换行
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文字内换行</title>
        <style type="text/css">
            p{
                font-family: "微软雅黑";
                border: 1px solid  red;
                padding: 10px;
                width: 220px;
                font-size: 22px;
                word-break: keep-all;
            }
        </style>
    </head>
    <body>
        <p>
能补完破碎的人生的梦,流水亦无有恋人,不像是人们的新宠,光明的时候诗人。
诗人们早就没有回来,能补完破碎的人生,是你不可不回家去的时候了,假使一世没有太阳吗。
在他们的脸上,这样低微的声音没有语言,这便是生活的人,恋人是不可无的。
有风俗的情绪,我生命的慰安。
        </p>
    </body>
</html>


效果如下图所示:

使用服务器端字体@font-face
在CSS的字体样式中,通常会收到客户端的限制,只有在客户端安装了该字体,才能真确显示,如果使用的不是常用字体,对于没有安装该字体的用户,是看不到真正的文字样式的,因此,设计师们会避免使用不常用的字体,更不敢用艺术字体。
为了弥补这个缺陷,CSS3新增了字体字定义功能,通过@font-face规则来引用互联网任意服务器中存在的字体,这样在设计页面的时候,就不会因字体稀缺而收到影响
1@font-face的语法规则
@font-face能够加载服务器端的字体文件,让客户端显示客户端没有的字体,语法如下:
@font-face:{属性:取值}
参数说明:
font-family:设置文本的字体名称
font-style:设置文本样式
font-variant:设置文本是否大小写
font-weight:设置文本的粗细
font-stretch:设置文本是否横向的拉伸变形
font-size:设置文本字体的大小
src :设置字定义字体的路径,可以包含format信息,此属性只能在@font-face里使用.其中,,font-family的属性值是用来声明字体名称的,该名称可以被当成字体使用,src也是比要的属性,用于指定字体文件的路径,其他属性,都是可选属性。
例子:使用服务器端字体
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>服务器端字体</title>
        <style type="text/css">
            @font-face {
                font-family:myfont;
                src: url(../font/head.ttf) format("truetype");
            }
            p{
                font-family: myfont;
                font-size: 20px;
                color: #f90;
            }
        </style>
    </head>
    <body>
        <p>hello world</p>
    </body>
</html>


效果如下图所示:

如果客户端安装的字体非常丰富,包含了服务器里提供的字体,处于性能的考虑,我们就会使用客户端的字体。

色彩模式和不透明度
在CSS3之前,我们通常使用的颜色都是基于RGB色彩模式,而且颜色本身也不能设置透明度,CSS3不但增加了HSL色彩模式,还增加了颜色本身的不透明设置和不透明属性,这两个色彩模式及不透明设置,在整个HTML框架内都适用。
HSL色彩模式是CSS3新增的色彩模式,是工业界的一种颜色标准,通过对色调,饱和度,亮度,三个颜色通道的变化以及他们相互之间的叠加来得到各式各样的颜色的,这给在颜色和色调的选择上提供了充足的余地,整个标准几乎包括了人类视力所能感觉到的所有颜色,是目前应用最广的颜色系统之一
在CSS3中,HSL色彩模式的表示语法如下:
hsl length percentage   percentage
length 表示色调,衍生于色盘,可以取任意值,其中该值除以360所得的余数为0表示红色,60为黄色,120为绿色,180为青色,240为蓝色,300为洋红色。
percentage表示饱和度,表示色调确定的颜色浓度,即鲜艳程度。值为百分比,范围从0%到100%,0%表示灰度,没有颜色,100%表示最鲜艳
percentage表示颜色的明亮度,值为百分比,范围从0%到100%。0%最暗,50%均值,100%最亮。
含不透明度的HSLA色彩模式
HSLA色彩模式为HSL色彩模式的延申,在色调,饱和度,和亮度三个要素的基础上增加了不透明的参数,使用HSLA色彩模式,可以设计出很多种方式的透明效果。
HSLA色彩模式的表示语法如下:
hsla  length  percentage percentage  alpha
前三个参数和HSL的含义完全一样,alpha表示不透明度,取值在0-1之间,取值为1时,于HSL色彩模式相同
含不透明度的RGBA色彩模式
RGBA色彩模式时RGB色彩模式的延申,在红绿蓝三原色的基础上增加了不透明度参数,使用HSLA色彩模式,也可以设计出多种方式的透明效果。
RGBA色彩模式的语法如下:rgba  red green blue  alpha
其中,前三个参数表示红色值,绿色值,蓝色值,取值范围为0-255,也可以是百分比数值,0.0%-100.0%,取值为1时,与RGB色彩模式相同。
不透明度opacity属性
除了有HSLA和RGBA两种色彩模式可以设置半透明之外,还有专门的不透明属性opactiy,可以设置半透明效果,该属性可以应用在任何页面元素种
opactiy属性的语法如下:
opactiy:  alpha inherit
alpha表示不透明度,取值在0-1之间,默认为1,表示不透明,0表示完全透明
inherit该值为继承,表示继承父元素的不透明度。

背景
在布局和美化网页方面,常常离不开对背景的设置,在传统的CSS背景设计中,由于功能的局限,设计师的灵感难以发挥,为了网页背景设计更加灵活,CSS3增强了原有背景的属性功能,并增添了一些新的背景属性。不但可以在同一元素内叠加多个背景图像,也可以对背景图像的远点位置,显示区域,和大小方面进行控制和调整
在CSS3中,可以对一个元素应用一个或者多个图片作为背景,代码和CSS2中的一样,只需用逗号来区别各个图片。语法如下:
background background-image  background-origin  background-clip  background-repeat  background -size  background-position
参数取值及说明
background-image:指定或检索对象的背景图像
background-origin:指定背景的远点位置,属于新增的属性
background-clip:指定背景的显示区域,属于新增的属性
background-repeat:设置或者检索对象的背景图像是否已及如何重排
background-size:指定背景图片的大小,属于新增的属性
background-position:设置或者检索对象的背景图像位置
如果定义多重背景图,则用逗号隔开各个背景图设置,如果直接使用子属性直接定义,那么各个子属性也用逗号依次隔开。
实例:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>多重背景</title>
        <style type="text/css">
            body{
                background: url(img/1.jpg) 120px 110px no-repeat,
                            url(img/2.jpg) 400px 10px no-repeat;
            }
        </style>
    </head>
    <body>
        
    </body>
</html>
上面的例子中设置了两个背景图,中间用逗号隔开,写在前面的背景图像会显示在上面,写在后面的背景图像会显示在下面。


指定背景的原点位置
CSS3的新增属性background-origin,用来指定背景图像的原点位置,在默认情况下,属性background-position总是以元素边框以内的左上角为坐标原点进行背景图定位,使用backgroudn-origin属性,可以对该原点的位置进行调整。
属性background-origin:border-box padding-box  context-box
取值说明:border-box:原点位置为边框区域的开始
padding-box:原点位置为内边距区域的开始位置
content-box:原点位置为内容区域的开始位置
可见,该原点位置的指定不是直接给出原点坐标,二十根据盒模型的结构来去确定的。
指定背景的显示区域
CSS3的新增属性background-clip,用来指定背景的显示区域,在支持CSS3的环境下,背景的显示区域是包含元素边框在内的,实际使用中,或许仅在内容区域显示背景,在CSS3中,可以使用属性backgound-clip来修改显示区域。
语法如下:
background-clip border-box padding-box  content-box
border-box:背景从边框开始显示
padding-box:背景从内边距开始显示
content-box:背景从内容区域开始显示
可见,该属性的使用方法和background-origin一样,其值也是根据盒模型的结构来确定的,这两个属性常常会结合起来使用,以达到对背景的灵活控制.
指定背景图像的大小
CSS3新增属性background-size,用来指定背景图像的大小,在传统的CSS设计中,背景图像的大小是不可以改变的,通常会把同样的图片,做成不同的尺寸,以适应不同大小的背景显示,在CSS3中,可以通过background-size属性指定背景图片的大小。
属性background-size语法如下:
background-size:length  percentage  auto cover  contain 取值说明:
length:由浮点值和单位组成的长度值,不可为负值
percentage:取值为0%到100%,是基于背景图像的父元素的百分比。
cover:保持背景图像本身的宽高比例,将图像缩放到正好完全覆盖所定义的背景区域。
contain:保持背景图像本身的宽高比例,将图像缩放到正好适应所定义的背景区域。
background-size属性可以使用length和percentage来设置背景图片的高度和宽度,第一个设置宽度,第二个设置高度,如果只给出第一个值,则第二个为默认。length是直接指定背景图像的宽和高,percentage是基于背景图像的父元素尺寸的百分比,来确定背景图像的宽和高,其中父元素的计算尺寸包含父元素的内边距,不包含边框。

边框
在网页设计中,边框是常用的美化方法之一,在CSS3之前,页面边框比较简单,只能设置边框的粗细和颜色,如果想要边框的效果更加丰富,只能事先设计好边框图片,然后使用背景或者直接插入图片的方式来实现。在CSS3中,可以通过样式表设置,可以实现如圆角边框,图像边框,等效果。
设计圆角边框-border-radius属性
border-radius属性为CSS3的新增属性,用来设计边框的圆角,语法如下:
border-radius:none length
none:默认值,表示边框没有圆角
length:由浮点数值和单位组成的长度的值,不可为负值,该值分为两部分,每组可以有1-4个值,第一组为水平半径,第二组为垂直半径,如果第二组省略,则默认为第一组的值。
派生的子属性
border-top-left-radius:定义左上角的圆角
border-top-right-radius:定义右上角的圆角
border-bottom-left-radius:定义左下角的圆角
border-bottom-right-radius:定义右下角的圆角
例子:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>边框圆角属性</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 80px;
                background-color: #fe0;
                border: 10px solid #f90;
                border-radius: 20px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>


运行结果如下图所示:

border-radius属性可以被赋值为2个值得集合参数,则第一个值表示左上角和右下角的圆角半径,第二个值表示左下角和右上角的圆角半径。
border-radius属性可以被赋值为3个值得参数,则第一个值表示左上角得圆角半径,第二个值表示左下角和右上角的圆角半径,第三个值表示右下角的圆角半径,
border-radius属性可以被赋值为4个值得参数,则第一个值表示左上角得圆角半径,第二个值表示右上角得圆角半径,第三个值表示右下角得圆角半径,第四个值表示左下角的圆角半径。
两组半径的圆角
border-radius属性还可以为边框的圆角同时指定两组半径值,第一组的值表示表示圆角的水平半径,第二组的值表示圆角的垂直半径,两组之间用/分隔开,
例子:两组半径的圆角
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>两组半径的圆角</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 80px;
                background-color: #fe0;
                border: 10px solid #f90;
                border-radius: 20px/40px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>


具体效果如下图所示:

设计图像边框-border-image属性
在CSS3之前,图像不能直接应用于边框,设计者们通常把边框的每个角或每条边单组做成一张图,并转而使用背景图像的方式,模拟实现边框,CSS3增加了border-image属性,专门用于图像边框的处理。
语法如下:
border-image:none image number percentage border-width strech repeat  round
none:默认值,表示边框没有图像
image:使用绝对或者相对的url作为图像源
number:裁剪边框图像大小,属性值没有单位,默认单位为像素
percentage:裁剪边框图像大小,默认使用百分比
border-width:由浮点数字和单位标识符组成的长度值,不可为负值,用于设置边框宽度。
strech,repeat,round分别表示拉伸,重复,平铺,其中默认值为strech
派生属性
border-top-image:定义上边框的图像
border-right-image:定义有边框的图像
border-bottom-image:定义下边框的图像
border-left-image:定义左边框的图像
border-top-left-image:定义左上角边框的图像
border-top-right-image:定义右上角边框的图像
border-bottom-left-image:定义左下角边框的图像
border-bottom-right-image:定义右下角边框的图像
border-image-source:定义边框的图像源,使用绝对或者相对的url地址
border-image-slice:定义图像的切片,设置图像的边界向内偏移的程度
border-image-repeat:定义边框图像的展现方式,拉伸,重复,平铺
border-image-width:定义图像边框的宽度,也可以使用border-width属性实现相同的功能
border-image-outset:定义边框图像的偏移位置。
图像的切片
border-image属性的语法中的number或者percetage都可以用于定义边框图像的切片,也可以使用子属性border-image-slice来定义边框图像的切片,但子属性border-image-slice没有获得任何主流浏览器的支持。
切片可以用number或者percentage来实现,定义出9个切片进行边框图像的渲染。
number为数值,没有单位,默认单位为像素。
percentage为百分比,该百分比是相对于图像而言的。
只要定义四个数值或者百分比,就会从图像的边界分别从上右下左四个方向内偏移相应的长度,即可形成4条直线,通过这四条直线,可以确定9个切片。
属性会在四个方向上,设置向内偏移的长度,它遵循CSS的方位规则,按照上右下左的顺时针方向逐个赋值,两个值和三个值的都会按照统一的方法和规则取解释
在9个切片中,四个角上的切片会直接显示。四个边上的切片,可以设置拉伸,平铺等显示方式,中间的切片,会以元素背景形式显示,其显示方式会与4个边上的切片保持一致,所有的切片,都会根据边框的宽度与切片的宽度的进行缩放。

设计多色边框border-color属性
border-color属性来设置边框的颜色,参数说明:
border-color:color transparent {1,4}
color是一个颜色值,可以是半透明颜色
transparent:透明值,不设置边框颜色时,默认为该值
border-color属性:遵循CSS的方位规则,可以分别按元素的4个边框设置颜色。
派生子属性
border-color属性本身可以定义1-4种颜色,用于设置各个边框的颜色,但是无法同时为边框指定多种颜色,因为这会导致歧义,border-color属性派生4个子属性,分别用于四个边框颜色的设置。他们是:
border-top-color:定义元素顶部边框颜色
border-right-color:定义元素右边框颜色
border-bottom-color:定义元素底部颜色
border-left-color:定义元素左侧边框颜色

Tags:HTML   网页

很赞哦! ()

随机图文

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计242篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们