zoukankan      html  css  js  c++  java
  • CSS-DAY01

    知识点:边框属性(border-radius、box-shadow、border-image)

    在 CSS3 中 border-radius 属性被用于创建圆角:

    div
    {
      border:1px solid red;
      background:pink;
      100px;
      height:100px;
      border-radius:50%;
    }
    

    在CSS3 中的 box-shadow 属性被用来添加阴影:

    div
    {
        width:300px;
        height:100px;
        background-color:pink;
        box-shadow: 10px 10px 5px blue;
    }

    在 div 中使用图片创建边框:

    div
    {
    border-image:url(border.png) 30 30 round;
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    }
    

    知识点:CSS3 背景(background-size、background-origin)

    background-size指定背景图像的大小:

    div
    {
    background:url(flower.png);
    background-size:50px 50px;
    background-repeat:no-repeat;
    padding-top:20px;
    }

    background-origin 属性规定背景图片的定位区域,背景图片可以放置于 content-box、padding-box 或 border-box 区域:

    div
    {
    border:1px solid black;
    padding:35px;
    background-image:url('head.png');
    background-repeat:no-repeat;
    background-position:left;
    }
    #div1
    {
    background-origin:border-box;
    }
    #div2
    {
    background-origin:content-box;
    }
    #div3
    {
    background-origin:padding-box;
    }
    

      

  • 相关阅读:
    循序渐进学习栈和队列
    循序渐进学习数据结构之线性表
    2018 noip 备战日志
    2018 noip 考前临死挣扎
    二维前缀和与差分
    noip模板复习
    宽搜总结
    强联通总结
    二分图再次总结
    NOIP 2016 换教室(期望dp)
  • 原文地址:https://www.cnblogs.com/beidongxing/p/7218001.html
Copyright © 2011-2022 走看看