zoukankan      html  css  js  c++  java
  • border和box-shadow

    1.写在前面

      border和box-shadow在css中是非常重要的属性,掌握好border,可以增加用户交互性。

    2.border-style

    用于设置边框样式:

     1 <style type="text/css">
     2 p.dotted{border-style: dotted;}
     3 p.dashed{border-style: dashed;}
     4 p.solid{border-style: solid;}
     5 p.double{border-style: double;}
     6 p.groove{border-style: groove;}
     7 p.ridge{border-style: ridge;}
     8 p.inset{border-style: inset;}
     9 p.outset{border-style: outset;}
    10 </style>
    11 
    12 
    13 </head>
    14 <p class="dotted">这是点线框</p>
    15 <p class="dashed">这是虚线框</p>
    16 <p class="solid">这是实线框</p>
    17 <p class="double">这是双边界线框</p>
    18 <p class="groove">这是3D沟槽线框</p>
    19 <p class="ridge">这是3D脊线框</p>
    20 <p class="inset">这是3D嵌入线框</p>
    21 <p class="outset">这是3D突出线框</p>
    22 
    23 </body>

    单独给每个边设置边框:

     1 <style>
     2 p
     3 {
     4     border-top-style:dotted;
     5     border-right-style:dashed;
     6     border-bottom-style:solid;
     7     border-left-style:double;
     8 }
     9 </style>
    10 </head>
    11 
    12 <body>
    13 <p>4种不同的边框</p>
    14 </body>

    边框的简写:

     1 <style>
     2 /*分别是宽度,样式,颜色*/
     3 p
     4 {
     5 border: 4px dashed red;
     6 }
     7 </style>
     8 </head>
     9 
    10 <body>
    11 <p>边框的简写属性</p>
    12 </body>

    3.box-shadow

    属性:

    box-shadow:h-shadow v-shadow blur spread color inset;(水平阴影(必须) 垂直阴影(必须) 模糊距离 阴影尺寸 颜色 内置还是外置阴影)

     1 <style>
     2 div{
     3     background-color: grey;
     4     box-shadow: 5px 5px 20px 5px black;
     5 }
     6 </style>
     7 </head>
     8 
     9 <body>
    10 <div>这是一个阴影实例</div>
    11 </body>
    本博客基于网络课程完成,旨在学习,有错误请指正!
  • 相关阅读:
    jsonp与promise封装
    屏幕自适应问题与tab状态更新数据问题
    插槽问题
    如何封装一个组件
    在url中带参数
    vuex中mapGetters,mapActions
    eventBus 与 this.$emit
    4.24上交作业
    4.23作业
    4.17作业
  • 原文地址:https://www.cnblogs.com/comefuture/p/6848551.html
Copyright © 2011-2022 走看看