• CSS3 新特性应用总结


    一、半透明边框

    • css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360);s:饱合度(0%~100%);l:亮度(0%~100%);a:透明度(0~1)
    • background-clip:裁剪背景颜色,默认为border-box(背景颜色扩散到border);padding-box(背景颜色扩散到padding);content-box(背景颜色扩展到content)
    • 示例代码:
    200px;
    height:200px;
    background: rebeccapurple;
    border: 10px solid hsla(300, 0%, 50%, 0.5);     
    background-clip: padding-box; //去掉和添加上此项可以看出效果

    二、多重边框实现

    • box-shadow:设置或检索对象阴影,格式:box-shadow: none | <length>{2,4} && color? | inset?
      • length<1>: 水平偏移,可负值
      • length<2>: 垂直偏移,可负值
      • length< 3 >: 阴影模糊值,不可负值
      • length<4>:外延长度,可负值
      • <color>:阴影颜色
      • inset:表示为内阴影,为空表示外阴影
      • 可以设置多组效果,多组之间用逗号隔开(利用可box-shadow可重叠特性来设置多重边框,但边框样式不可做也条纹、虚线之类的)
      • 如果要设置检索文本阴影,用text-shadow属性

    • outline实现两个边框(只能实现两重边框,但边框样式灵活)

    三、背景的定位

    • background-position:背景定位,值说明如下
      • center,left,top,bottom,right等都是表示背景从何地开始显示,如果设置重复平铺,会有不同的效果
      • 值可是数值或百分比:background-position: right 20px bottom 30px;
    • background-origin:背景图片的定位参数,三值context-box,padding-box,border-box等。
    • clac()计算宽度的函数
    • 示例代码如下:
    复制代码
    background-image: url('../img/bck.png');
    background-repeat: no-repeat;
    background-size: 40px 40px;
    200px;
    height:200px;
    margin-top:10px;
    border: 5px solid red;
    --background-position: right 0px bottom 0px;
    background-origin: content-box;
    background-position: calc(100% - 50px);
    padding: 10px;
    复制代码

    四、多重圆角边框

    • box-shadow:他的圆角是会跟随border-radius走的,而outline且不会。
    • 最小阴影(box-shadow)计算公式为:勾股定理,设置阴影时应该大于此值
    • 示例代码:
    复制代码
    margin: 10px auto;
     10em;
    height: 8em;
    background: tan;
    border-radius: .8em;
    padding: 1em;
    box-shadow: 0 0 0 .6em #655;
    outline: .6em solid #556;
    复制代码

     

    五 、条纹背景

    • 利用background为linear-gradient函数实现,linear-gradient取值如下:
      • <angle>:角度,渐变的方向
      • to left right top bottom
      • color:指定颜色
      • color-stop:指定渐变的起止颜色
      • length:用长度值指定起止色的位置,不可为负值
      • percentage:用百分比指定起止色的位置
      • 语法格式:linear-gradient([[<angle>|to <side-to-corner>],]? <color-stop>[,<color-stop>]+)
      • side-to-corner:[left|right] || [top||bottom]
      • color-stop: <color>[<length>|<percentage>]?
    • 示例代码(斜角条纹):
    background: linear-gradient( 40deg, #fb3 5px, #58a 15px);
     200px;
    height: 100px;
    margin: 0px auto;
    background-size: 30px 30px;
    • 当linear-gradient添加多组值的时候,前面的值会覆盖后面的,如下代码:
    background-image:linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0)

    说明:linear-gradient(45deg, transparent 75%, #bbb 0)的信息会被linear-gradient(45deg, #bbb 25%, transparent 0) 覆盖。

    • 示例代码:
    复制代码
     200px;
                height: 200px;
                background: #eee;
                background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
                linear-gradient(45deg, transparent 75%, #bbb 0),
                linear-gradient(45deg, #bbb 25%, transparent 0),
                linear-gradient(45deg, transparent 75%, #bbb 0);
                background-position: 0px 0px, 12.5px 12.5px, 12.5px 12.5px, 25px 25px;
                background-size: 25px 25px;
    复制代码

    代码解释:

    * image与position一对一的相互参照;image实现图形,position实现定位
    * 每个图形都是一个小的三角形,两个三角形相互拼接成一个正方形,然后近一步定位即可。
    * 注意角度的旋转,他是顺时针的。

    
    
    • linear-gradient还可以合并写法,也就是定义一个角度,后面跟随多组颜色值
    linear-gradient(45deg, #bbb 25%, transparent 0, 
    	ransparent 50%, #bbb 0, transparent 75%, #bbb 0)
    • css可以用(反斜杠)进行换行,如上
    • 不规则条纹
      • 主要利用background-size多组值实现,第组值按照自定的间距进行平铺
      • 最与数学中的最大公约倍数有关联,他们会以最大分倍数的宽度重复, 如果让他看上去更随机就需要避开此条规则
      • 示例代码:
    复制代码
    .wrap{
                 600px;
                height: 100px;
                background: hsl(20, 40%, 90%);
                background-image: 
                    linear-gradient(90deg,#fb3 10px, transparent 0),
                    linear-gradient(90deg,#ab4 20px, transparent 0),
                    linear-gradient(90deg,#655 30px, transparent 0);
                background-size: 40px 100%, 60px 100%, 80px 100%;
            }
            .wrap-thr{
                margin-top: 5px;
                 600px;
                height: 100px;
                background: hsl(20, 40%, 90%);
                background-image: 
                    linear-gradient(90deg,#fb3 10px, transparent 0);
                background-size: 40px 100%;
            }
            .wrap-one{
                margin-top: 5px;
                 600px;
                height: 100px;
                background: hsl(20, 40%, 90%);
                background-image:linear-gradient(90deg,#ab4 20px, transparent 0);
                background-size: 60px 100%;
            }
            .wrap-two{
                margin-top: 5px;
                 600px;
                height: 100px;
                background: hsl(20, 40%, 90%);
                background-image:linear-gradient(90deg,#655 30px, transparent 0);
                background-size: 80px 100%;
            }
    复制代码

    • 复杂边框背景
      • 方案一 利用border-image实现,border-image使用的是九宫格伸缩法
      • 方案二 利用背景多层覆盖原理实现,先实现多层有颜色的背景,最后加上一层白色的。
    复制代码
    .wrap{
                 200px;
                height: 50px;
                padding: 1em;
                border: 1em solid transparent;
                background: linear-gradient(white,white) padding-box,
                repeating-linear-gradient(-45deg,red 0, red 12.5%, 
                	ransparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
            }
            .wrap-one{
                margin-top: 5px;
                 200px;
                height: 50px;
                padding: 1em;
                border: 1em solid transparent;
                background:             repeating-linear-gradient(-45deg,
                	ransparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
            } 
            .wrap-two{
                margin-top: 5px;
                 200px;
                height: 50px;
                padding: 1em;
                border: 1em solid transparent;
                background:  
                repeating-linear-gradient(-45deg, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
            }
            .wrap-thr{
                margin-top: 5px;
                 200px;
                height: 50px;
                padding: 1em;
                border: 1em solid transparent;
                background:             repeating-linear-gradient(-45deg,transparent 0, red 50%) 0 / 5em 5em;
            }
    复制代码

  • 相关阅读:
    os模块
    函数练习
    集合 去重
    作业二:购物车程序
    作业一: 三级菜单
    字典练习
    字典
    切片
    冒泡练习
    判断整型数据奇偶数
  • 原文地址:https://www.cnblogs.com/xiao-love-meng/p/6196444.html
Copyright © 2020-2023  润新知