边框

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>边框</title>
  <style type="text/css">
   .testDiv{
    width: 200px;
    height: 200px;
    background-color: plum;
    /*只需要指定边框的形状,就可以显示边框
     solid:实线;
     dashed:虚线;
     dotted:点状线*/
    /*border-style: solid;*/
    /*改变边框的粗细,默认是3像素*/
    /*border-width: 8px;*/
    /*边框的颜色,边框的默认颜色和字体的颜色是一样的*/
    /*border-color: cyan;*/
    /*复合写法*/
    border: aqua dashed 50px;
    4个方向的写法
    border-top-style: solid;
    /*圆角效果 值越大圆角越明显  正方形50%的时候是圆形  长方形50%的时候是椭圆*/
    border-radius: 50%;
    
   }
   #z1{
    width: 0;
    border-top: 100px solid gold;
    border-bottom:100px solid seagreen;
    border-left: 100px solid aqua;
    border-right: 100px solid navy;
   }
  </style>
 </head>
 <body>
  <div class="testDiv">我是div</div>
  <div id="z1"></div>
 </body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、透明边框(IE9+) 最主要的一句,是hsla()这个函数,里面的.5,是透明度。 技巧: backgroun...
    ____雨歇微凉阅读 2,063评论 1 8
  • 这房子很老,房顶瓦砾碎石铺了一层,底层有一层泥土,也不知泥土是怎么来的,泥土萌生了各色杂草,甚至书。墙面上附生着许...
    雨天沙滩阅读 381评论 0 2
  • 今天整天很顺利,我虽懒洋洋,把家教之声的文稿完成并通过了,上下午答疑。 女儿也按部就班完成计划,计算题发给同学,一...
    sanyaojing阅读 325评论 0 0
  • 太阳升起,一天开始了,太阳落下,该洗洗陪孩子睡啦! 妞妞说,电视里有个叔叔搬1000块砖挣10元钱,我说一块砖是一...
    67fbaec5208f阅读 249评论 0 0