美化盒子

Posted boring333

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了美化盒子相关的知识,希望对你有一定的参考价值。

美化盒子

1.美化文本

第一部分:

字体大小【font-size】

         含义:字符框的高度

         可继承

         默认值:medium

         取值

                   预设值【了解】

                            medium:中等字号

                            larger:大字号

                            smaller:小字号

                   数值

                            px【常用】:绝对字体大小

                            em【常用】:相对于父元素的字体大小,若没有父元素,则使用基准字号

                                     基准字号:浏览器设置的默认字体大小,通常为16px,可更改

                            %:原理同em,例如200%,相当于2em,50%,相当于.5em

                            rem:相对于基准字号

加粗字体【font-weight】

         将【font-weight】设置为【bold】,以加粗文字,该属性可继承

倾斜字体【font-style】

         将【font-style】设置为【italic】,以倾斜文字,该属性可继承

字间距【letter-spacing】

         设置【letter-spacing】的值为px或em,可控制文字间的间隙,该属性可继承

首行缩进【text-indent】

         可实现第一个文字向后缩进

给文字划线【text-decoration】

         设置【text-decoration】属性,可以给文字划线

 

第二部分:

修饰首字母【伪元素选择器  ::first-letter】

         【::first-letter】可选中元素中的第一个文字

修饰首行【伪元素选择器  ::first-line】

         【::first-line】可选中元素中的第一行文字

修饰选中文字【伪元素选择器 ::selection】

         【::selection】可选中被用户框选的文字

字体类型

         概念:衬线字体和非衬线字体

         修改字体类型【font-family】

         使用【@font-face指令】加载web字体

         使用图标字体

 

2.美化边框

圆角边框【border-radius】

         圆角边框原理图

使用圆角边框的常见场景

         普通的圆角边框

         圆形边框

         圆形图片

 

3.美化背景

背景图

         使用【background-image】设置背景图片

         使用【background-repeat】设置图片重复方式

                   repeat:【默认值】从左到右从上到下重复

                   no-repeat:不重复

                   repeat-x:仅在x轴方向上重复

                   repeat-y:仅在y轴方向上重复

         使用【background-position】设置图片在边框盒中的位置

                   预设值

                            left、right、top、bottom、center

                   数值

                            使用数值可实现从雪碧图(Sprite)中取得部分图像

                            示例

         使用【background-size】设置背景图尺寸

                   预设值

                   数值

         使用【background-attachment】固定背景图

                   scroll:【默认值】背景图跟随元素移动

                   fixed:背景图固定

         使用速写属性【background】统一设置

                   background:背景图 位置 / 尺寸 重复方式 固定方式 背景颜色

         使用多背景图

背景渐变

         线性渐变:【background-image:linear-gradient(...)】

background-image:
linear-gradient(to right, red, blue);

         径向渐变(圆形渐变):【background-image:radial-gradient(...)】

background-image:
radial-gradient(lightblue, black)

4.透明度和鼠标样式

         透明度【opacity】和alpha通道

使用【opacity】属性,
可调整整个盒子的透明度
该属性的取值范围是0~1 
其中,0表示全透明,1表示完全不透明

使用rgba颜色,可调整某个颜色的透明度,
rgba分别表示: r:red,g:green,b:blue,a:alpha
书写格式为:rgba(red, green, blue, alpha)
其中,alpha表示透明通道,取值是0~1之间
0表示全透明,1表示完全不透明
也可以用十六进制表示,例如rgba(0,0,0,0.5)可以写成#00000080

         鼠标样式

cursor:auto 默认值

cursor:crosshair十字形

cursor:default

cursor:move

cursor:e-resize

cursor:ne-resize

cursor:nw-resize

cursor:n-resize

cursor:se-resize

cursor:sw-resize

cursor:s-resize

cursor:w-resize

cursor:text

cursor:wait

cursor:helpcursor:pointer浏览器的默认样式中对a元素设置该值

cursor:url(imgs/target.ico), auto 
表示使用一个图标来表示鼠标样式
需要注意,图标的文件格式最好是ico或者cur,以避免在某些浏览器中无法显示
另外,图标的尺寸控制在32*32以内

5.阴影

       文字阴影【text-shadow】

text-shadow: 2px 2px 4px rgba(0,0,0,.5)

第1个参数:2px,表示阴影的位置向x轴方向(横坐标)的偏移量为2px

第2个参数:2px,表示阴影的位置向y轴方向(横坐标)的偏移量为2px

第3个参数:4px,表示阴影的模糊半径,该数值越大,阴影越模糊

第4个参数:rgba(0,0,0,.5),表示阴影的颜色

盒子阴影【box-shadow】

box-shadow: 4px 5px 6px rgba(0,0,0,.5)

box-shadow和text-shadow的用法非常类似

它的4个参数分别表示:x轴的偏移量、y轴的偏移量、模糊半径、阴影颜色

box-shadow: 4px 5px 6px 7px rgba(0,0,0,.5)

多了一个参数,最后一个7px表示阴影的扩散半径,该值越大,阴影越大

box-shadow: 0px 0px 6px 7px rgba(0,0,0,.5)

使用该方式可制作一个以盒子为中心的扩散阴影

box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,.5)

加入inset关键字,可将阴影的扩散方向由向外变为向内

以上是关于美化盒子的主要内容,如果未能解决你的问题,请参考以下文章

CSS网页美化与盒子模型

美化盒子和文本字体

CSS核心知识点

CSS样式

盒子模型

什么是CSS