zoukankan      html  css  js  c++  java
  • 左边竖条的实现方法

    一:border

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                *{margin:0px;padding:0px;}
                .wrap{width:500px;height:200px;margin:100px auto;}
                .wrap .con{width:400px;height:60px;border-left:5px solid purple;background: #ccc;}
            </style>
        </head>
        <body>
                <div class="wrap">
                    <div class="con"></div>
                </div>
        </body>
    </html>

    二:伪类

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                *{margin:0px;padding:0px;}
                .wrap{width:500px;height:200px;margin:100px auto;}
                .wrap .con{width:400px;height:60px;background: #ccc;}
                .wrap .con:after{display: block;content:"";width:5px;height:60px;background: purple;}
            </style>
        </head>
        <body>
                <div class="wrap">
                    <div class="con"></div>
                </div>
        </body>
    </html>

    三:box-shadow

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                *{margin:0px;padding:0px;}
                .wrap{width:500px;height:200px;margin:100px auto;}
                .wrap .con{width:400px;height:60px;background: #ccc;box-shadow:-5px 0px 0px purple;}
            </style>
        </head>
        <body>
                <div class="wrap">
                    <div class="con"></div>
                </div>
        </body>
    </html>

    四:filter:drop-shadow

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                *{margin:0px;padding:0px;}
                .wrap{width:500px;height:200px;margin:100px auto;}
                .wrap .con{width:400px;height:60px;background: #ccc; -webkit-filter:drop-shadow(-5px 0 0 deeppink);}
            </style>
        </head>
        <body>
                <div class="wrap">
                    <div class="con"></div>
                </div>
        </body>
    </html>

    五:渐变

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                *{margin:0px;padding:0px;}
                .wrap{width:500px;height:200px;margin:100px auto;}
                .wrap .con{width:400px;height:60px;background:-webkit-linear-gradient(left,purple 0px,purple 5px,#ccc 5px)}
            </style>
        </head>
        <body>
                <div class="wrap">
                    <div class="con"></div>
                </div>
        </body>
    </html>
  • 相关阅读:
    快速排序算法(c#)
    NHibernate 中createSqlQuery的执行
    Asp.net页面下客户端按钮提交页面到其他Action
    希尔(插入)排序 c#代码
    Asp.net MVC 中冒号的作用
    Net注册JS的几种方式和区别
    Asp.net MVC 使用json数据格式交互
    DataSet的手工创建
    反射基础
    uva10082 WERTYU
  • 原文地址:https://www.cnblogs.com/yang0901/p/6772354.html
Copyright © 2011-2022 走看看