zoukankan      html  css  js  c++  java
  • CSS高级技巧(二)背景和边框

    box-shadow

    box-shadow属性支持多个阴影,用逗号分隔

    使用inset时,需要同时增加相应的内边距

    边框内圆角的实现可以用该属性配合outline来实现,因为box-shadow时贴着圆角的,而outline显示为直角,此方案可能会在以后的提案中不可行

    outline

    可以实现boxshadow无法实现的其他样式的边框

    可以通过内置负值的outline-offset在元素内部实现一个虚线或其他样式的边框

    background-position

    可以指定具体方向上的偏移量,但同时也需要注意提供回退方案

    background: url(code-pirate.svg) no-repeat bottom right #58a;
    background-position: right 20px bottom 10px;

    background-origin

    改变背景图片展示的盒子,默认是padding-box,可以改为content-box或者border-box

    calc()

    在设置背景图片的展示边距时,可以通过calc()函数一步到位,但需要注意在运算符的两侧各加一个空白符,此目的是为了向前兼容,以后可能会允许关键字的出现

     实现条纹背景

    background: linear-gradient(#fb3 50%, #58a 50%);
    background-size: 100% 30px;

    “如果某个色标的位置值比整个列表中在它之前的色标的位置值都要 小,则该色标的位置值会被设置为它前面所有色标位置值的最大值。”

     对于现 代浏览器来说,我们可以把 SVG 文件以 data URI 的方式内嵌到样式表中, 甚至不需要用 base64 或 URLencode 来对其编码:

    background: #eee url('data:image/svg+xml,
     <svg xmlns="http://www.w3.org/2000/svg" 
     width="100" height="100" 
     fill-opacity=".25">
     <rect x="50" width="50" height="50" /> 
     <rect y="50" width="50" height="50" /> 
     </svg>');
    background-size: 30px 30px;

    伪随机背景

    通过质数来增加随机性

    图片边框的实现

    background配合background-clip配合size:cover配合origin

  • 相关阅读:
    php单元测试标注(注解)
    python数字图像处理(1):环境安装与配置
    python实现身份证识别
    python tensorflow 学习
    python tensorflow 安装
    python 微信跳一跳进阶
    python 微信跳一跳和源码解读
    C#保存登录用户名供其他页面调用
    C#解析复杂的Json成Dictionary<key,value>并保存到数据库(多方法解析Json 四)
    C# JavaScriptSerializer 解析Json数据(多方法解析Json 三)
  • 原文地址:https://www.cnblogs.com/goOtter/p/9840257.html
Copyright © 2011-2022 走看看