013 HTML+CSS(Class152 - 164)

[A]  背景拓展

            background-size:            设置背景图的尺寸大小

                参数:

                    a, b                用数字设置长和宽(px)

                    contain             包含,即背景图以最大尺寸呈现在父元素中

                    cover               覆盖,即背景图的局部充满整个父元素

            background-origin:          设置背景图的填充位置

                参数:

                    padding-box         背景填充在padding区域,默认值

                    border-box          背景填充在border区域

                    content-box         背景填充在content区域

            background-clip:     

                    padding-box         裁剪出padding区域的背景,默认值

                    border-box          裁剪出border区域的背景 

                    content-box         裁剪出content区域的背景 

            【注】可写在background的符合样式中

 

 [B] CSS背景颜色渐变

            1. linear-gradient(point||angle, 颜色1 10%,颜色2 12%,......)      线性渐变 

                    参数:

                        point||angle        方向可省略,默认从上到下,  to形式和角度deg形式两种指定方向的方法

                        color               按顺序定义渐变颜色

                        percentage          (red 25%, blue 50%, green 80%) 

                                            指0-20%为纯红色,20%-50%为红-蓝渐变色,50%-80%为蓝-绿渐变色,80%-100%为纯绿色

            2. radial-gradient(point, 颜色1 10%,颜色2 12%,......)      圆形渐变

                    参数:

                        point               定义方向

                        color               按顺序定义渐变颜色

                        percentage          (red 25%, blue 50%, green 80%) 

                                            指0-20%为纯红色,20%-50%为红-蓝渐变色,50%-80%为蓝-绿渐变色,80%-100%为纯绿色

            【注】颜色渐变智能加在background-image上

 

[C]  文字图标

            字体图标

            阿里巴巴字体图标库:https://www.iconfont.cn


            自定义图标

                https://icomoon.io/app  在线生成自定义图标

 

[D] 文字阴影和盒子阴影

            文字阴影

                text-shadow: x y blur color;         文字阴影

                    参数:

                        x  y:         分别需要向右向下偏移的量

                        blur:        模糊程度,值越大越模糊

                        color:       阴影的颜色

                    【注】

                        1. 阴影是在文字的下方的,不会覆盖原文字

                        2. 可以设置多层阴影,中间通过逗号隔开即可

                    网上可以搜到炫酷的文字阴影

 

            盒子阴影

                box-shadow: 

                    参数:

                        x y:          分别需要向右和向下偏移的距离(px)

                        blur:         模糊程度,值越大越模糊(px)

                        spread:      阴影的扩散范围(px)

                        color:       阴影的颜色

                        inset:       在盒子内部显示阴影(outset的设置不起作用,默认为外阴影)

 

 

[E] 遮罩

                mask:url("") no-repeat 10px 10px / 100px 100px; 

                    参数:

                        url("")                     遮罩图路径

                        no-repeat                   遮罩图不重复

                        10px 10px / 100px 100px     偏移量和尺寸,偏移量可分别设置为center,即缩放时以中心为主。

                【注】mask没有标准化,需使用-webkit-mask代替

            

                        
[F] 倒影

                box-reflect: below 20px url() linear-gradient()

                    参数:

                        below:                     在下方显示倒影

                        20px:                      倒影与原图的距离

                        url() / linear-gradient()   添加遮罩 / 透明度的线性渐变

                【注】box-reflect没有标准化,需使用-webkit-box-reflect代替

                扩展:

                    利用scale(-1)即可实现图片的翻转,另外还有scaleX(-1)、scaleY(-1)等

            
[G] 模糊与计算

            模糊

                filter:blur(20px);                  给元素添加模糊属性,值越大越模糊


            cale计算

                width: cale(100% - 100px);          宽度总是比父元素的宽度小100px

 

[H] 分栏属性

            分栏布局

                column-count:                       分栏的栏数

                column-width:                       分栏的宽度

                column-gap:                         分栏的间距

                column-rule:                        分栏的边线(虚实线,宽度,颜色等)

                column-span:                        合并分栏

                【注】分栏的栏数和宽度是相冲突的,两者只能设置一个

 

 

[ I ] 伪类和伪元素

                css3中对伪类和伪元素做了明显的区分

                css3规定伪类是在一个冒号后加伪类名,伪元素是在两个冒号后加伪元素名

                伪类:同一个标签,根据其不同的状态,有不同的样式。这就叫做“伪类”。

                    伪类本质上是为了弥补css选择器的不足,以便获取更多的信息。通常获取不存在或者DOM树中的信息,

                    或者获取不能被常规css选择器获取的信息。

                        :hover

                        :focus

                        :empty

                        ...

            

                伪元素

                    伪元素本质上创建一个由内容的虚拟容器。这个容器不包含和DOM元素,但是可以包含内容。

                    另外开发者还可以为伪元素指定样式。

                        ::selection

                        ::first-line / first-letter

                        ::before / after

                        ...

posted @ 2020-06-15 18:04  CarreyB  阅读(113)  评论(0编辑  收藏  举报