《任务2 CSS总结》常用边框样式

边框风格样式属性border-style

1.none 边框 (默认值)
2.solid 直线边框
3.dashed 虚线边框
4.dotted 点状边框
5.double 双线边框
6.groove 凸槽边框
7.ridge 垄状边框
8.inset inset边框
9.outset outset边框
若想要实现其中边框的一条边有属性,可以将border-style改为border-top-style(top,bottom,left,right上下左右)

边框宽度:border-width

1.细边框:thin
2.中等边框:medium
3.粗边框:thick
4.固定值边框:数字+px
5.继承:inherit

边框颜色:border-color

实例如下:

<style type="text/css">
        div{
            width: 50px;
            height: 50px;
            float: left;
            margin-right: 10px;
            background-color: brown;
            border-width:medium;
            border-color: #dddddd;
        }
        .div1{
            border-style: solid;
        }
        .div2{
            border-style: dashed;
        }
        .div3{ 
           border-style: dotted; 
       } 
       .div4{
            border-style: double;
        }
        .div5{
            border-style: groove;
        }
        .div6{
            border-style:ridge ; 
       }
        .div7{
            border-style:inset;
        }
        .div8{
            border-style:outset;
        }
    </style>
</head>
<body>
<div class="div1">solid</div>
<div class="div2">dashed</div>
<div class="div3">dotted</div>
<div class="div4">double</div>
<div class="div5">凸槽边框</div>
<div class="div6">垄状边框</div>
<div class="div7">inset边框</div>
<div class="div8">outset边框</div>
</body>
Screenshot from 2016-12-09 16-26-40.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般...
    鲁大师666阅读 413评论 0 3
  • 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般...
    可爱傻妞是我的爱阅读 312评论 0 0
  • 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般...
    书写人生吖阅读 415评论 0 0
  • 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般...
    米塔塔阅读 594评论 1 12
  • 我,已经好久没见到你了,但你焦躁的一声“死老鼠”仍在耳边响起…… 我,已经好久没见到你了,但你在我睡梦中依旧是那么...
    墨香古意阅读 244评论 0 0