zoukankan      html  css  js  c++  java
  • 013 HTML+CSS(Class152

    [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计算

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

    [H] 分栏属性

                分栏布局

                    column-count:                       分栏的栏数

                    column-                       分栏的宽度

                    column-gap:                         分栏的间距

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

                    column-span:                        合并分栏

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

    [ I ] 伪类和伪元素

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

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

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

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

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

                            :hover

                            :focus

                            :empty

                            ...

                

                    伪元素

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

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

                            ::selection

                            ::first-line / first-letter

                            ::before / after

                            ...

  • 相关阅读:
    layui 自定义统一监听事件(大范围)
    layui 自定义个别事件
    Django layui {{ }}冲突解决方法
    sudo apt install ...
    Field XXX in XXXX required a bean of type XXXX that could not be found
    Springboot2+bootstrap-table1.12.1+MybatisPlus3.0 后台物理分页实现
    springboot2在后台打印系统执行的SQL
    @Service注解让spring找到你的Service bean
    接受参数的包装类的数据类型写错报错
    Java 日期转字符串
  • 原文地址:https://www.cnblogs.com/carreyBlog/p/13132430.html
Copyright © 2011-2022 走看看