zoukankan      html  css  js  c++  java
  • css3的边框详解

    css边框的三个属性

    border:

    用法:.box{ border:border-width||border-style||border-color;}(第三个颜色使可选的)

    css3中可以创建圆角边框,添加阴影框,并作为边框的形象而不使用设计程序

    1. border-radius:

    用法 :.box{ border-radius:25px;}

    1. border-shadow:

    用法 :.box{ box-shadow:10px 10px 5px #888888;}

    第一个参数是X轴偏移量,第二个参数是Y轴偏移量,第三个是阴影的尺寸,第四个是颜色

    1. border-image:

    用法 :.box{ border- image:url() 30 30 round;

             -webkit-border-image:url() 30 30 round;/*Safari and  older*/

             -o-border-image:url() 30 30 round;/*Opera*/

    }

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>边框</title> 
    <style> 
    .flex-container {
    display: -webkit-flex;
    display: flex;
    flex-flow:row wrap;
    justify-content:stretch;
    /*align-items:baseline;*/
    align-content:stretch;
    /* 400px;*/
    
    
    height:400px;
    background-color: lightgrey;
    
    }
    
    .flex-item {
    background-color: cornflowerblue;
    width: 200px;
    height: 100px;
    margin: auto;
    margin-right: 10px;
    border:1px solid red;
    border-radius:5px 15px 20px 35px;
    /*边框阴影*/
    -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
    box-shadow: 10px 10px 5px #888888;
    }
    .flex-item:hover{
    /* -webkit-flex-shrink:0.5;
    flex-shrink:2;*/
    flex-grow:1.2;
    border-color: green;
    }
    
    
    </style>
    </head>
    <body>
    
    <div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div> 
    <div class="flex-item">flex item 4 </div> 
    <div class="flex-item">flex item 5 </div> 
    <div class="flex-item">flex item 6</div>
    <div class="flex-item">flex item 7</div>
    <div class="flex-item">flex item 8</div> 
    <div class="flex-item">flex item 9 </div> 
    <div class="flex-item">flex item 10 </div> 
    <!-- <div class="flex-item">flex item 4 </div> 
    <div class="flex-item">flex item 5 </div> 
    <div class="flex-item">flex item 6</div>
    <div class="flex-item">flex item 7</div>
    <div class="flex-item">flex item 8</div> 
    <div class="flex-item">flex item 9 </div> 
    <div class="flex-item">flex item 10 </div> 
    </div> -->
    
    </body>
    </html>
  • 相关阅读:
    BSS Audio® Introduces Full-Bandwidth Acoustic Echo Cancellation Algorithm for Soundweb London Conferencing Processors
    转:虚拟运营商颠覆八大行业 170号码将成主流?
    移动通信调制技术的进展 转
    转:瑞利信道,莱斯信道和高斯信道模型
    转:Android开发之旅:环境搭建及HelloWorld
    web端视频直播网站的弊端和优势
    频域分辨率与DFT,DCT,MDCT理解
    转:超声波支付
    谈音频算法技术研发团队建立
    转:HTML5标准与性能之四:asm.js
  • 原文地址:https://www.cnblogs.com/minchao/p/6088302.html
Copyright © 2011-2022 走看看