首页 > 代码库 > CSS3 新特性应用总结

CSS3 新特性应用总结

2024-08-28 02:11:22   241人阅读

一、半透明边框

  • 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)
  • 示例代码：
width: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;
width: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;
width: 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);
width: 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) 覆盖。

  • 示例代码：
width: 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, 
\transparent 50%, #bbb 0, transparent 75%, #bbb 0)




    

  • css可以用\（反斜杠）进行换行，如上
    • 

  • 不规则条纹

      

    • 主要利用background-size多组值实现，第组值按照自定的间距进行平铺
      • 

    • 最与数学中的最大公约倍数有关联，他们会以最大分倍数的宽度重复, 如果让他看上去更随机就需要避开此条规则
      • 

    • 示例代码：
      • 

    

    • 







.wrap{
            width: 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;
            width: 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;
            width: 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;
            width: 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{
            width: 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%, 
            \transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
        }
        .wrap-one{
            margin-top: 5px;
            width: 200px;
            height: 50px;
            padding: 1em;
            border: 1em solid transparent;
            background:             repeating-linear-gradient(-45deg,
            \transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
        } 
        .wrap-two{
            margin-top: 5px;
            width: 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;
            width: 200px;
            height: 50px;
            padding: 1em;
            border: 1em solid transparent;
            background:             repeating-linear-gradient(-45deg,transparent 0, red 50%) 0 / 5em 5em;
        }






技术分享


 
CSS3 新特性应用总结






























        

            
                
                  
                
                

                    联系

                    我们