CSS-边框效果

矫情吗；* 2022-07-15 11:09 229阅读 0赞

###### 2.1、border-image ######

<title>Border-image</title>
       <style type="text/css">

*{margin:0;padding:0;}
        div{
         width:300px;
         padding:9px;
         /*padding:40px;*/
         /*border-image: url(img/2.png) 26 26 26 26/10 repeat round ;*/
         -o-border-image: url(img/1.png) 30 15 18 15/8  stretch stretch ;
         -moz-border-image: url(img/1.png) 30 15 18 15/8  stretch stretch ;
         -webkit-border-image: url(img/1.png) 30 15 18 15/8  stretch stretch ;
         border-image: url(img/1.png) 30 15 18 15/8 stretch stretch ;
         border-style: solid;
         margin:20px  auto;
       }

</style>
     </head>
     <body>
       <div>border-image的应用</div>
     </body>

![20161114170225006][]

**border-radius**

<title>border-radius</title>
       <style type="text/css">

*{margin:0;padding:0;}
        #d1{
         width:100px;
         height:100px;
         border:3px solid;
         border-top-right-radius:45px 60px;
         margin:20px auto; 
       }
       #d2{
         width:100px;
         height:100px;
         border:3px solid;
         border-radius:0 45px 0 0/0 60px 0 0;
         margin:20px auto; 
       }

</style>
     </head>
     <body>
       <div id="d1"></div>
       <div id="d2"></div>
     </body>

![20161114190425781][]

###### box-shadow ######

<title>box-shadow</title>
       <style type="text/css">

*{margin:0;padding:0;}
        div{
         width:100px;
         height:100px;
         border:1px solid;
         margin:20px auto;
         box-shadow:5px 8px 5px 3px red inset ;
       }

</style>
     </head>
     <body>
       <div></div>
     </body>

![20161114193522729][]

###### 圆角边框方案二 ######

<title>圆角边框方案二</title>
       <style>

.box {
           float:left;
           width:220px;         /*容器宽度控制*/
           margin:20px auto 0;
           margin-right:2%;
         }
         .box .content {
           padding:2px;
           text-align:center ;
         }
         .content {
           height:100px;       /*整体高度控制*/
         }
         .b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8 {
           overflow:hidden;
           height:1px;
         }
         .b1,.b8 {
           margin:0 5px;		/*相对于垂直方向边框的偏移5px*/
         }
         .b2,.b7 {
           border-right:2px solid;
           border-left:2px solid;
           margin:0 3px;       /*相对于垂直方向边框的偏移3px*/
         }
         .b3,.b6 {
           border-right:1px solid;
           border-left:1px solid;
           margin:0 2px;        /*相对于垂直方向边框的偏移2px*/
         }
         .b4,.b5 {
           height:2px;
           border-right:1px solid;
           border-left:1px solid;
           margin:0 1px;		/*相对于垂直方向边框的偏移1px*/
         }
         .content {
           overflow:hidden;
           border-right:1px solid;
           border-left:1px solid;
         }
         .color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content {
           border-color:#9400D3;																		/*左右边框色*/
         }
         .color1 .b1,.color1 .b8 {
           background:#9400D3;																		/*上下边框色*/
         }
         .color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content {
           background:#EEAEEE;																	/*背景色*/
         }

</style>
     </head>
     <body>
       <div class="box color1">
         <div class="b1"></div>
         <div class="b2"></div>
         <div class="b3"></div>
         <div class="b4"></div> 
         <div class="content">  
           <h4>圆角边框方案二</h4>
           兼容所有浏览器的圆角边框。
         </div>
         <div class="b5"></div>
         <div class="b6"></div>
         <div class="b7"></div>
         <div class="b8"></div>    
       </div>
     </body>

![20161116094754779][]

###### 2.2、搜索框实例 ######

<title>搜索框实例</title>
       <style type="text/css">

#search {
           position:relative;
           padding-top:3px;
           width:330px;
           height:35px;
           background:url(search.jpg) no-repeat;
         }
         #input {
           position:absolute;
           left:2px;
           border:0;
           width:240px;
           height:25px;
           font-size:20px;
           background:none;
         }
         #go {
           position:absolute;
           left:258px;
           border:0;
           width:70px;
           height:30px;
           background:none;
           cursor:pointer;
         }
         #search2 {
           position:relative;
           padding-top:3px;
           width:330px;
           height:35px;
         }
         #input2 {
           position:absolute;
           left:2px;
           border:0;
           border:1px solid #CCCCCC;
           width:240px;
           height:25px;
           font-size:20px;
           background:#FFFFFF;
         }
         #go2 {
           position:absolute;
           left:258px;
           border:0;
           border:1px solid;
           border-radius:5px;
           width:70px;
           height:30px;
           font-size:14px;
           color:#FFFFFF;
           background:#4876FF;
           cursor:pointer;
         }

</style>
     </head>
     <body>
      方案一：使用背景图片制作的搜索框
      <div id="search">
       <input type="text" id="input" />
       <input type="button" id="go" />
      </div>
      方案二：纯CSS实现的搜索框
      <div id="search2">
        <input type="text" id="input2" />
        <input type="button" id="go2" value="搜　索" />
      </div>
     </body>

![20161116095116671][]

![20161116095144202][]

###### 2.3、微博发布框 ######

<title>微博发布框</title>
      <style type="text/css">

*{margin:0;padding:0;font-size:12px;}
       .weibodiv {
        position:relative;
        margin:20px  auto;
        width:600px;
       }
       .ad {
        display:block;
        float:left;
        width:291px;
        height:37px;
        background:url(img/1.png);
       }
       .adtext {
        position:absolute; /*absolute是相对于定位属性是static以外的第一个父级元素的位置进行定位*/
        top:17px;
        right: 0;
        /*position: relative;*/ /*relative是相对于元素自身的正常位置进行定位*/
        /*left: 150px;*/
        /*float:right;*/ /*元素设置了浮动后,会自动生成一个块级框*/
        line-height:30px;
       }
       p {
        float:right;
       }
       .weibotext {
        top:30px;
        float:left;
        margin:5px auto;
       }
       textarea {
        overflow:auto;
        width:590px;
        height:150px;
        font-size:16px;
       }
       .post {
        display:block;
        float:right;
        margin:3px;
        border:1px solid;
        border-radius:5px;
        width:80px;
        height:30px;
        text-align:center;
        line-height:30px;
        font-size:16px;
        font-weight:bold;
        color:#FFFFFF;
        letter-spacing:5px;
        text-decoration:none;
        background:#8BC528;
        cursor:pointer;
       }
       #weibotextnumber {
        font-size:20px;
        font-family:Bell MT;
       }
       #weibotextnum {
        opacity:0;
       }
       span img {
        width:488px;
        height: 31px;
       }

</style>
      <script type="text/javascript">

</script>
     </head>
     <body>
      <div class="weibodiv">
       <a href="#" class="ad"></a>
       <a href="#" class="adtext">点击牛运按钮，赢取码上好礼</a>
       <div class="weibotext">
        <textarea></textarea>
        <p id="weibotextnum">还能输入<span id="weibotextnumber">140</span>字</p>
       </div>
       <span id="weibobottomlinks"><img src="img/2.png" title="工具栏" alt="图片已丢失" /></span>
       <a class="post">广播</a>
      </div>
     </body>

![20161123120033432][]  
![20161123120213850][]  
![20161123150444911][]  
![20161123150823137][]

###### 2.4、拍立得效果框 ######

<title>为图片创建拍立得效果边框</title>
       <style type="text/css">

body {
           background:#ABABAB;
         }
         img.palaroid {
           position:absolute;
           box-shadow:1px 1px 5px #333;
           border:solid #fff;
           border-width:6px 6px 20px 6px;
           width:300px;
           height:200px;
           background:#000;
         }
         div.palaroid {
           position:absolute;
           top:300px;
           left:50px;
           box-shadow:2px 2px 3px #aaaaaa;
           border:1px solid #BFBFBF;
           padding:10px 10px 10px 10px;
           width:200px;
           transform:rotate(30deg); /*变换中的旋转效果*/
           -ms-transform:rotate(30deg); /* IE 9 */
           -moz-transform:rotate(30deg); /* Firefox */
           -webkit-transform:rotate(30deg); /* Safari and Chrome */
           -o-transform:rotate(30deg); /* Opera */
           font-size:15px;
           text-align:center;
           background-color:white;
         }
         img {
           width:100%;
           /*width: 200px;*/ /*为图片设置尺寸大小有利于提升网页加载速度*/
           /*height: 146px;*/
         }

</style>
     </head>
     <body>
      <img src="3.jpg" alt="" class="palaroid"/>
      <br><br><br>
      <div class="palaroid"><img src="4.jpg" alt="" />彩色的铅笔</div>
     </body>

![20161123161732339][]

###### 2.5、CSS 3 动画边框 ######

* {
        margin:0;
        padding:0;
       }
       #demo {
        position: absolute;
        top:100px;
        left:200px;
        padding: 10px;
        width: 300px;
       }
       #demo > img {
        display: block;
        position: relative;
        cursor:pointer;
       }
       #demo:hover .animation_border {
        opacity: 1;
       }
       .animation_border {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
        -webkit-transition: opacity 0.3s ease;
        -moz-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease; /*透明度的过渡效果*/
        -webkit-animation: animate 0.5s linear infinite;
        -moz-animation: animate 0.5s linear infinite;
        animation: animate 0.5s linear infinite; /*背景的不间断动画效果*/
        background-size: 30px 30px; /*控制条状的宽度*/
        background-image: -webkit-linear-gradient(45deg, red 25%, transparent 25%, transparent 50%, red 50%, red 75%, transparent 75%,  transparent);
        background-image: -moz-linear-gradient(45deg, red 25%, transparent 25%, transparent 50%, red 50%, red 75%, transparent 75%,  transparent);
        background-image: linear-gradient(45deg, red 25%, transparent 25%, transparent 50%, red 50%, red 75%, transparent 75%, transparent) ; /*设置渐变角度、各个百分点的颜色,控制颜色间的过渡*/
       }
       @-webkit-keyframes animate {
        from {
         background-position: 0 0;
        }
        to {
         background-position: 60px 30px;
        }
       }
       @-moz-keyframes animate {
        from {
         background-position: 0 0;
        }
        to {
         background-position: 60px 30px;
        }
       }
       @keyframes animate {
        from {
         background-position: 0 0;
        }
        to {
         background-position: 60px 30px; /*数值上,左大右小就会看上去是向右滑动,否则反向,相差30,则是由条状块的宽度决定,藉此平滑循环滑动*/
        }
       }

</style>
     </head>
     <body>
      <h1>CSS 3 动画边框实例，请将鼠标指向图片查看效果</h1>
      <div id="demo">
       <div class="animation_border"></div>
       <img src="img/4.jpg" width="300" height="180" alt="" />
      </div>
     </body>

![20161125162302142][]  
![20161125162430362][]

[20161114170225006]: /images/20220715/1bd97305b104461c915aa619e7d41a7c.png
[20161114190425781]: /images/20220715/9e8d7930beb945258f0fb1be585daf3f.png
[20161114193522729]: /images/20220715/4f970231931f4c72927c99bb713cd5f0.png
[20161116094754779]: /images/20220715/eca6eb8521614265a07756743f6bc69a.png
[20161116095116671]: /images/20220715/add633aae1174e909e40043c73aba5fb.png
[20161116095144202]: /images/20220715/a37d2e4a4a2044f1855c5a3d50620bea.png
[20161123120033432]: /images/20220715/976103e1de3642c8848ecef0c4869331.png
[20161123120213850]: /images/20220715/409151c50c3442169ee9c145a0f74677.png
[20161123150444911]: /images/20220715/830b19c676dc4ecf830a696e4a892d7b.png
[20161123150823137]: /images/20220715/52afff78923245e3ae2602dd14e1dc2d.png
[20161123161732339]: /images/20220715/f9769ca6ea634562b9884939085a52b8.png
[20161125162302142]: /images/20220715/bd56bf8ba5b940f981011aa503830b91.png
[20161125162430362]: /images/20220715/2b65429fc3de4bfc832dd38bcd2aa199.png