2020-04-13.第十九天

<!--

    文本阴影:

        text-shadow: x轴位置  Y轴位置  阴影大小  阴影颜色

        注:如果想添加多个阴影  每一组阴影以逗号分隔。

-->

<!-- 

    盒子阴影:

        box-shadow: x y 阴影的模糊度 阴影扩散的大小 阴影颜色 内阴影(inset 可选)

    添加多阴影:以逗号分隔的形式添加多阴影

-->

<!-- 

    英文或者数字默认显示:如果没有换行的情况下:尝试把下一个长单词放在下一行显示。

    word-wrap:break-word:

        功能:尝试把长单词换到下一行显示,如果在下一行仍然有超出的情况下,自动断句。

    word-break:break-all;

        功能:粗暴的断句。

-->

<!-- 

    background-origin:背景图的起始位置

        padding-box; 默认值(padding区域开始)

        border-box; 边框后面开始

        content-box; 从内容区域开始

    background-clip:; 背景的裁切(只显示哪个区域的背景)

        border-box:;默认值

        padding-box:;

        content-box:;

    background-size:;  控制背景图的大小

        属性值:宽度  高度

            属性值的数值:

                10px  10px

                100%  100%

                cover      按照背景图的比例放大到全部平铺在元素后面则停止

                contain    按照比例放大,当宽或者高,达到容器最高则停止

    多背景图的设置:

        background:url() no-repeat,url() no-repeat,url()

-->

<!-- 

    如果让背景图在不变形的情况下,填满整个内容区:  background-size:cover

-->

<!-- 

    rgba()  ->  opacity(让整个元素包括内容透明)

-->

<!-- 

    图片边框:

        把一张图片,当作一个边框就行显示。

    border-image:;  简写

        border-image-source 用在边框的图片的路径。

border-image-slice 图片边框向内偏移(不加单位)。 [ 把图片切割成九宫格 ]

border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)

        border-image-outset 边框向外偏移

-->

<!-- 

    border-radius: 半径!

        一个值:四周圆角

        两个值:左上角及右下角    右上角及左下角

        三个值:左上角  右上角及左下角    右下角

        四个值:从左上角开始 顺时针设置。(左上 右上 右下 左下)

        分垂直半径和水平半径:

        border-radius: 水平半径 / 垂直半径

-->

<!-- 

    width的属性值:

        fill-available  合理分配有效剩余空间

        fit-content      找子元素内容的宽度。按照子元素的宽度进行设置


        max-content      找子元素最大的宽度

        min-content      找子元素最小的宽度

-->

<!-- 

    面试题:

        width:100% 和 width:fill-available;有什么区别??

        对padding增加后的解析状态有影响。

-->

<!-- 

    pointer-events:none;

        阻止各种按钮(button\a)的功能

        穿透遮罩层。

-->

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,790评论 0赞 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,508评论 0赞 11
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,825评论 0赞 7
  • 第一章 F12: element.style 内联样式(可以直接在上面写代码进行简单调试) user agent...
    fastwe阅读 1,699评论 0赞 0
  • (这是15年初学css时记的笔记) 选择器 简单选择器 标签选择器 直接把标签名加前面。 类选择器 用.+ cla...
    burningalive阅读 1,233评论 0赞 0

友情链接更多精彩内容