zoukankan      html  css  js  c++  java
  • CSS知识点

    box-shadow:[h-shadow v-shadow blur spread color inset]

    h-shadow: 这个值代表的是阴影在x轴上的阴影位置。可以是负值。

    当它为正值的时候表示向右位移一定的距离【出现在元素的右边】,负值表示向左位移【出现在元素的左边】。这个距离的单位可以是px、em或者rem;是必需的,不能省略!

    v-shadow: 这个值表示阴影在y轴上的位置。也可以是负值。

    当它为正值的时候表示向下偏移一定的距离【出现的元素的下方】,值为负的时候表示向上偏移一定的距离【出现在元素的上方】;;是必需的,不能省略

    blur: 指的是阴影的模糊半径。这个值使得阴影部分的过渡看起来更柔和 ; 可选

    spread: 表示的是阴影的半径。我在网上看到有人对spread和blur的区别发出疑问,其实很简单:blur用于描述模糊半径,它的值决定了阴影的模糊程度;而spread是表示阴影所占区域的大小,这是两个不同的概念。可选

    color: 阴影的颜色可以用任何颜色单位来表示。当我们没有设置color值的时候,默认就是黑色。可选

    inset: 默认情况下,我们设置的阴影都是外部阴影,而这个属性值的作用是将外部阴影转换成内部阴影。可选

     

    border-image:[source slice repeat]

    border-image-source: border-image的背景图使用url()调用,图片可以是相对路径或是绝对路径,也可以不使用图片,即border-image:none;

    border-image-slice: 

    • 没有单位,能在数值后面加px, 默认单位就是像素(px)。例如:border-image:url(border.png) 27 repeat;这里的27专指27px。 
    • 支持百分比值,百分比值大小是相对于边框图片的大小,假设边框图片大小为400px*300px,则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。 
    • 剪裁特性。类似于CSS中的clip属性。其有1~4个参数,代表上右下左四个方位的剪裁,符合CSS普遍的方位规则(与margin,padding等或border-width一致)

    border-image-repeat: 取值为repeat(重复),round(平铺)和stretch(拉伸)。其中,stretch是默认值。

    border-image-  默认是边框的宽度 用来限制相应区域背景图的范围 ,首先相应背景区域的图像会根据这个属性值进行缩放 然后再重复或平铺或拉伸  

    在复合写法中应该位于 slice属性 和repeat属性中间 用“/”间隔 
    如:border-image:url(border.png) 27 / 6rem / repeat;
    
    
    语法:border-image- [ <length> | <percentage> | <number> | auto ]{1,4}
    
    length 带 px, em, in … 单位的尺寸值
    percentage 百分比
    number 不带单位的数字;它表示 border-width 的倍数
    auto 使用 auto, border-image-width 将会使用 border-image-slice 的值

    border-image-outset

    语法:border-image-outset: [ <length> | <number> ]{1,4}
    相当于把原来的贴图位置向外延伸。不能为负值,试一下就知道。
    length是数值加单位“px”,number指的是相对于边框宽度增加的倍数。
    
    在复合写法中应该位于 border-image-width 后面,用“/”间隔
    如:border-image:url(border.png) 27 / 6rem / 1.5rem /repeat;
    向外延伸1.5rem再贴图。

    background-origin: border-box | padding-box |  content-box; 默认padding-box

    border-box就是把背景图片的坐标原点设置在盒模型border-box区域的左上角

    padding-box就是把背景图片的坐标原点设置在盒模型padding-box区域的左上角

    content-box就是把背景图片的坐标原点设置在盒模型content-box区域的左上角

     当background-attachment属性设置为fixed时,background-origin属性会失效。

    background-clip: border-box | padding-box |  content-box; 默认border-box 

    background-clip:border-box;表示从border-box区域(包括border-box区域)开始向内裁剪;

    background-clip:padding-box;表示从padding-box区域(包括padding-box区域)开始向内裁剪;

    background-clip:content-box;表示从content-box区域(包括content-box区域)开始向内裁剪;

      

    background-attachment: 

    前提是定义了background-image属性,然后用background-attachment来指明背景图的位置是固定于视口的,还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。

    scroll:默认值,背景图相对于元素固定,背景随页面滚动而移动,即背景和内容绑定。

    fixed:背景图相对于视口固定,所以随页面滚动背景不动,相当于背景被设置在了body上。

    local:背景图相对于元素内容固定

    inhert:继承,没什么说的。

  • 相关阅读:
    公安备案接入服务商如何填写?(网站接入信息)
    VSCode 开发Vue必备插件
    阿里云ecs从零配置centos 安装宝塔bt环境 (安装失败提示setuptools installation failed)
    hover时下划线从中间向两端渐变
    phpcms v9后台增加阅读量字段,可任意修改阅读量
    织梦登录后台变空白解决方法大全
    html鼠标滚动后导航栏吸顶效果
    关于height:100%和height:100vh的区别
    mycat
    Hash碰撞
  • 原文地址:https://www.cnblogs.com/yangjie-space/p/12596113.html
Copyright © 2011-2022 走看看